The CSS Clip Property

You’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.

At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.

Syntax

The syntax for clip looks like this:

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

The first thing you should know about clip is that it can be applied to an element only if that element is set to position: absolute. I’m not entirely sure why this is the case. I assume there are reasons. It is quite a big drawback, but regardless, this can be an interesting property to experiment with.

The next part of the syntax is the actual clip property itself. The value can be either a defined shape, or “auto”. A value of “auto” has no clipping, and is the default for all elements. So using clip: auto is the same as not including clip at all.

If you define a shape (currently only rectangles are allowed), you do so with the “rect()” function, passing in values that define the shape. The values can be positive or negative values.

The rect() Values

The values passed into rect() are a tad confusing at first, but once you fiddle with them, they’re not difficult to work with. Basically the values represent top, right, bottom, and left, in that order — just like other CSS properties like margin and padding. The values define the offsets from the top of the element and from the left of the element.

In other words, in the example above, the first value places an imaginary line running horizontally 110px from the top (the first value) and another horizontal line 170px from the top (the third value). The second value places an imaginary vertical line 160px from the left, and the last value places another imaginary vertical line 60px from the left.

If that confuses you, maybe this image will help:

This image uses Photoshop-like “guides” to show you where the respective values will place the imaginary intersecting lines. The bright area of the image is the part of the image that would be visible. The rest would be hidden. So the “clipped” area defined by the intersecting lines is the area that remains.

You can think of clipping kind of like adding visibility: hidden to a portion of an element.

It’s also of note that IE6-8 do provide support for clip but instead of commas separating the values, those browsers require white space instead. It seems that most other browsers also support clip with white space instead of commas, so if you want full support you’ll have to either serve IE its own styles with the space-delimited syntax or else just use spaces for all browsers. I haven’t tested spaces in all browsers, so test before you do anything.

A Funky Animated Gallery

The clip property is included in the W3C’s list of animatable properties, so I put together a wacky little animated gallery just to demonstrate how clip works. View it with the button below and click any of the images to see them animate.

• View Demo

Source : http://www.impressivewebs.com/css-clip-property/