4umi.com/web/css/clip

CSS clip

Useful CSS

Elements which are not part of the document flow, which are absolutely positioned and attributed with an overflow other than the default visible, can be ‘clipped’ to show only part of their content and leave the rest of the element transparent, allowing any content underneath to show through. Currently only rectangular shapes are possible, but future versions of the CSS standard and future browsers are expected to support other shapes too. Until then, circles and the like can be realized by overlaying an image with a transparent area. The clip property is not supported in Netscape 4.

Clip syntax

The rectangle is specified by the word rect, followed by brackets inside which four values are separated by spaces, or, comma's, no spaces, no comma's, no sp... The browser manufacturers and specification authors seem not to agree on this point, even amongst themselves. The values represent the distances to the top, right, bottom and left sides of the rectangle, as measured from the top left corner of the element. Each value is a combination of a number (which may include the dot to denote a decimal fraction) and a unit, % for relative, em, in, cm, mm, pt and px for other measures. There should be no space between the number and its unit.

A special value is auto, meaning no clipping takes place on that side. If all four sides are auto, it is sufficient to state it only once.

Another special one is inherit, which suggests the clip style of the parent element is followed, but support for it is poor with only Netscape 6 and Opera 4 honouring the value.

Clip placement

Like any other style property, the clip can be applied inline, as part of an element's style attribute...

<p style="clip: rect( auto 0.5in auto 2cm );">Hello world!</p>

... or in a stylesheet, cascading along with the other properties...

#someId { clip: rect( auto 50% 25% auto ); }
.aClass { clip: rect( inherit ); }

... or even in script:

document.getElementById( 'someID' ).style.clip = 'rect( auto 4em 2.1em auto )';

The value is then to be supplied as a single string. Sides cannot be manipulated individually in the major browsers.

Just don't forget the clip property depends on other style properties, position and overflow, to be able to have any effect.

On the side

clipThe theory sounds solid, but deviations are possible. The wording in the specification is not entirely clear, but is generally understood to measure each value from its own side, e.g. the value for the amount of clipping on the bottomside should be the distance from the bottom edge of the object to the bottom edge of the clipped area. All browsers that support clips, deviate from this, and measure all values from the top left. The amount of clipping on the bottomside should then be given as the distance from the top to the clipped edge at the bottom. The difference may be subtle, the results are not.

Some samples

The enduring photo of an ambitious and frustrated James Dean walking a rainy Times Square, NY, has been reproduced here several times, each with a different clip setting. For an interactive test, try the clip demonstration in our Javascript section.

No clip

 James Dean at Times Square. clip:rect( auto )

Clip once...

 James Dean at Times Square. clip:rect( 25% auto auto auto )
 James Dean at Times Square. clip:rect( auto 25% auto auto )
 James Dean at Times Square. clip:rect( auto auto 25% auto )
 James Dean at Times Square. clip:rect( auto auto auto 25% )

Twice: adjacent sides...

 James Dean at Times Square. clip:rect( 25% 25% auto auto )
 James Dean at Times Square. clip:rect( auto 25% 25% auto )
 James Dean at Times Square. clip:rect( auto auto 25% 25% )
 James Dean at Times Square. clip:rect( 25% auto auto 25% )

Twice twice: opposite sides...

 James Dean at Times Square. clip:rect( 25% auto 75% auto )
 James Dean at Times Square. clip:rect( auto 25% auto 75% )  The left is right of the right...
 James Dean at Times Square. clip:rect( 75% auto 25% auto )  The top is below the bottom...
 James Dean at Times Square. clip:rect( auto 75% auto 25% )

Three times a little...

 James Dean at Times Square. clip:rect( 25% 25% 75% auto )
 James Dean at Times Square. clip:rect( auto 75% 25% 25% )
 James Dean at Times Square. clip:rect( 25% auto 75% 25% )
 James Dean at Times Square. clip:rect( 25% 75% auto 25% )

Three times a lot...

 James Dean at Times Square. clip:rect( 25% 75% 75% auto )
 James Dean at Times Square. clip:rect( auto 75% 75% 25% )
 James Dean at Times Square. clip:rect( 25% auto 75% 75% )
 James Dean at Times Square. clip:rect( 75%,75%,auto,25% )

Clipped!

 James Dean at Times Square. clip:rect( 10px,90px,90px,10px )
 James Dean at Times Square. clip:rect( 25%,75%,75%,25% )
 James Dean at Times Square. clip:rect( 38%,62%,62%,38% )
 James Dean at Times Square. clip:rect( 70px,90px,95px,65px )

Conclusion

Despite the sheer number of clipped rectangles in this sample collection, as should be evident, other arrangements are still possible.

Reference