blog

Home / DeveloperSection / Blogs / Clip property in CSS3

Clip property in CSS3

Vijay Shukla2969 15-Dec-2012

In this blog I have mentioned the CSS3’s Clip property. Clip property is used to split the image and text with the help of rect method. if an image is larger than its containing element - The clip property let you specify the scope of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.

Syntax:

rect(Top, Right, Bottom, Left)

<!DOCTYPE html>
<html>
<head>
<style>
p
{
   position:absolute;
   clip:rect(0px,100px,60px,0px);
}
img
{
    position:absolute;
    clip:rect(0px,60px,60px,0px);
}
</style>
</head>
<body>
<p>12345678910MindStick</p><br/><br/>
<img src="images.jpg" width="100" height="100" />
</body>
</html>

Output:

Clip property in CSS3

Updated 18-Sep-2014

Leave Comment

Comments

Liked By