Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 257

FIGURE 4-24 A text-shado w on a paragraph HTML element
Applying clipping
The clip property allows you to specify what portion of an element is visible. The clip property
takes only one parameter, the shape to clip to. Currently, the only shape supported is a
rectangle, so the only parameter value that will yield any results is the rect() function. For
example, the following code is the valid syntax to specify a clip property:
img{
position: absolute;
clip: rect(25px, 50px, 50px, 25px);
}
In the above code sample, the clip region is set to be a rectangle. The first two parameters
of the rect function build the coordinates for what part of the image will be clipped. The
parameters run in clockwise order as top, right, bottom, and left sides of the rectangle. In
addition, all measurements are taken from the left of the top edge of the source box being
clipped. So, in the above code sample, a region of the image is defined as 25 px from the top
to form the top edge of the clipped region, 50 px from the left to form the right edge of the
clipped region, 50 px from the top to form the bottom edge of the clipped region, and 25 px
from the left to form the right edge of the clipped region. This essentially creates a rectangle
starting from the point (25px, 25px) and with a height and width of 25px. Figure 4-25 shows
an image before and after being clipped with these values.
FIGURE 4-25 The image on the left is the full image of a floral arrangement. The image on the right is a
clipped version of the same image.