Tag Archives: clip

CSS Clip Property

I recently came across the clip property on the Web Designer Wall, it’s a property I’ve not heard of before, probably because I’ve not really had a need for it, but now that I know what it does, there are so many things it would save time with!

The example below is an excerpt from the Web Designer Wall:

.clip {
 position: relative;
 height: 130px;
 width: 200px;
 border: solid 1px #ccc;
}
.clip img {
 position: absolute;
 clip: rect(30px 165px 100px 30px);
}

How it works is you have a surrounding element, such as a div or li which sets the overall width and a border which gives the appearance of masking the image. It also sets the position of relative so that on the img tag, we can absolutely position it within the outer element.

The img tag is then set to position: absolute; with a clip property that clips the image to a rectangle shape (so it can also be a square).

The uses of this property are potentially huge, especially for image galleries, and you can also resize images by specifying the width and height on the img tag. Perfect for a gallery, as long as the images you are scaling aren’t huge, you don’t want images that appear small ot take a long time to load after all!

The big downside of this is that according to the SitePoint CSS reference, Internet Explorer up to and including version 7 do not fully support it, so you may need to use a variation on the syntax especially for Internet Explorer. The way I understand it,  you just need to use spaces instead of commas in the rect() syntax for Internet Explorer, but I haven’t had a chance to test this yet to be sure.

Even if it doesn’t work fully in Internet Explorer, you could easily implement it in a way that will gracefully degrade in IE.

I’m looking forward to using this property, have you used it on one of your sites? I’d love to see how you’re using it, let me know in the comments!