HTML, XHTML & CSS

36
Part V: The Future of (X)HTML
The box-shadow attribute works with element boxes (the rectangular region
that surrounds any kind of HTML element as rendered) and with the boundary
around the edge of a graphic. The text-shadow attribute creates a
shadow around individual characters inside some kind of block element (a
paragraph in the following example). See Figure 20-5, and visit our CSS3 shadows
example at www.dummieshtml.com/examples/ch20/shadows.
Figure 20-5: Look for shadows around the outlined text box, bare text,
and an image.
Both of the shadow properties take three length values and a color as their
attributes, as shown in text-shadow: 2px 2px 7px #010101; in the preceding
code snippet. The three lengths take the following meanings (and the
color defines the color for the shadow):
✓ Shadow horizontal offset, where a positive value falls to the right and a
negative value falls to the left
✓ Shadow vertical offset, where a positive value falls below and a negative
one falls above
✓ Blur radius, where if the value is zero (0), the shadow is sharp; the
higher the value gets the more blurred the shadow will be