Home > DeveloperSection > Blogs > Clip property in CSS3

Clip property in CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1432  View(s)
Rate this:

Clip property in CSS3

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:


Don't want to miss updates? Please click the below button!

Follow MindStick