CSS Clipping Review

Even though the rules for the yellow and purple layers have the same width, height, top and left dimensions set, a framing effect is taking place because of clipping. Think of clipping as the regions defined for the viewable portion of a layer, or window dimensions in which you look through to see the layer.

#yellow{
position:absolute; top:35px; left:20px; 
width:50px; height:50px; 
z-index:2;  
background-color:yellow; layer-background-color:yellow;
clip:rect(10,45,45,10);
}

#blue{
position:absolute; top:35px; left:20px; 
width:50px; height:50px; 
z-index:1; 
background-color:blue; layer-background-color:blue;
clip:rect(0,50,50,0); 
}

The CSS syntax is as follows, default values in pixels:

clip:rect(top right bottom left)

Hint: if you don't remember the top-right-bottom-left order, you'll be in TRouBLe.

show yellow layer's clip values
show blue layer's clip values

The clip values for top and left represent the actual amount to clip from the top and from the left. But for the right and bottom values, the amount to be clipped starts at the pixel value declared, and ends at the width or height of the layer. The formula for the right and bottom values is this:

Right Clip Value = Layer Width - Amount To Clip from Viewable area
Bottom Clip Value = Layer Height - Amount To Clip from Viewable area

Both the yellow and blue layers' height and width are 50, but I want a 10 pixel "frame" around yellow. For the top and left clip values, I simply set them to 10 because that is the amount I want clipped from yellow's top and left viewable region. But for the right and bottom clip values, I subtract 10 from the layer's width and height in order to clip 10 pixels from those viewable regions.

clip:rect(10,40,40,10)

Since I don't want to clip anything off of blue's clipping regions, but I want to force the layer to be visible (some browsers won't render an empty layer tag pair), the top and left values are set to zero, and I subtract zero from its width and height values (50) to get its right and bottom clipping values.

clip:rect(0,50,50,0)

If you are going to use clip syntax in a style rule, the values for bottom and right must be higher than the values of top and left in order to see any of the layer.

View the Source