Blog

Clip property in CSS

Posted by Mahak Gupta Blogs | JavaScript Aug 26, 2012
In this blog, we will discuss the Clip property in CSS.
In this blog, we will discuss the Clip property in CSS. Here we take Same Image three times and now we apply the clip property on the image like this:
<html>
<body>
<div style="position:absolute;top:0;left:50;
    clip:rect(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
<div style="position:absolute;top:0;left:150;
    clip:rect(auto, 45px, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>

<div style="position:absolute;top:0;left:250;
    clip:rect( auto, auto, auto,10px)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
</body>
</html>

1.png


and now we look an example of circle in place of rectangle:

<html>
<body>
<div style="position:absolute;top:0;left:50;
    clip:circle(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
</body>
</html>


The output Will be:

2.png
COMMENT USING
PREMIUM SPONSORS
Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.