Demo:

Here is the CSS code used in the above demo:

<style type="text/css">
.blue {position:absolute; left:250px; top:150px; width:300px; height:300px; 
clip:rect(0,300,300,0); background-color:blue; z-index:1;}
.navy {position:absolute; left:250px; top:150px; width:300px; height:300px; 
clip:rect(50,250,250,50); background-color:navy; z-index:2;}
</style>

As you can see with the above example, both layers are the same size but the navy layer appears smaller than the blue. This is due to the clipping setting, highlighted in blue. While clipping a layer, the best thing to do is to consider the top-left corner of the layer that is being clipped as the origin, (0,0) on the x,y plane. With this in mind, the 'clip' setting follows this syntax:

clip:rect( TOP, RIGHT, BOTTOM, LEFT )

So to apply this format to the above example of clip:rect(50,250,250,50), the top of the clipping plane is 50 pixels from the top of the layer, the right of the clipping is 250px from the left of the layer, the bottom of the clipping plane is 250px from the top of the layer (remember where the origin is!), and finally the left edge of the clipping layer is 50px from the left edge of the navy layer. Still with me?

Many people get confused about the syntax of clipping layers, but it is important to understand these methods if you are to progress to manipulating clipping layers on the fly, such as the animation effect that I have used for the section pages of this very site. It is this technique that I will explain in my next article on dynamic layers.

---

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.