Setting an Element s Visible Area (Clipping)

Setting an Element's Visible Area (Clipping)

Unlike setting the width and the height of an element, which controls the element's dimensions (see Chapter 6), clipping an absolute or fixed position element designates how much of that element's content will be visible (Table 8.2). The part that is not designated as visible will still be there, but viewers won't be able to see it, and the browser will treat it as empty space.

Table 8.2. Clip Values
VALUE	COMPATIBILITY
rect (<topLength> <rightLength><bottomLength> <leftLength>)	IE5^[*], FF1, S1, O7, CSS2
auto	IE4^[*], FF1, S1, O7, CSS2

^[*] IE5.5 for Windows

In this example (Figure 8.3), the absolutely positioned drop box has been clipped so that only the cat's smiling face remains.

Figure 8.3. The Cheshire Cat's face is all that appears from this image. The King, Queen, and Jack have all been clipped away.

To define the clip area of an element:

position: absolute;

Set the position property to fixed or absolute (Code 8.2). Although clipping should work with other position types, Internet Explorer only recognizes it if the position is set to fixed or absolute.

Code 8.2. The clip region is defined for the `dropBox` class.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Visible Area of An Element (Clipping)</title> <style type="text/css" media="screen"> img {      display: block;      margin: 4px; } .dropBox {      position: absolute;      clip: rect(35px 350px 200px 50px);      left: 10%;      width: 377px;      padding: 6px;      border: 3px solid #f66;      font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div >         <img src="/books/3/292/1/html/2/alice31.gif" height="480" width="379" alt="Alice in Wonderland" />The  executioner's argument was, that you couldn't cut off a head unless there was a body to cut  it off from.</div> </body></html>

clip:

Type the clip property name, followed by a colon (:).

rect(15px 350px 195px 50px);

Type rect to define the shape of the clip as a rectangle, an opening parenthesis ((), four values separated by spaces, a closing parenthesis ()), and a semicolon (;).

The numbers define the top, right, bottom, and left lengths of the clip area, respectively. All these values are distances from the element's origin (top-left corner), not from the indicated side(Figure 8.4).

Figure 8.4. The clipping region is defined by four values that detail how far from the origin the top, right, bottom, and left edges of the element's visible area should appear.

Each value can be either a length value or auto, which allows the browser to determine the clip size (usually, 100 percent).

Tips

The element's borders and padding, but not its margin, will be clipped along with the content of the element.
Currently, clips can be only rectangular, but future versions of CSS promise to support other shapes.
You can change the clipping using DHTML (see "Changing an Object's Visible Area" in Chapter 16).