| The drop shadow is a time-honored method for adding depth and texture to two-dimensional designs. Apple's Safari browser has included the text-shadow property, which is part of CSS3 (Table 4.5), allowing you to define the color, offset (x and y), and blur for a drop shadow behind any text. Although this will not work in any browser except Safari, it will not interfere with other browsers either. Table 4.5. Text-Shadow ValuesVALUE | COMPATIBILITY |
|---|
<color> | S1.1, CSS3 | <x-offset> | S1.1, CSS3 | <y-offset> | S1.1, CSS3 | <blur> | S1.1, CSS3 |
In this example (Figure 4.5), the level 1 heading has a nice reddish glow behind it, while other text has different drop shadows to make them stand out. Figure 4.5. The title has a reddish glow beneath it, while the author's name and chapter number have a drop shadow. 
To define the text shadow: | | 1. | text-shadow:
Type the text-shadow property name, followed by a colon (:), in the CSS definition list (Code 4.5).
Code 4.5. The drop-shadow property allows you to set the x,y offset and the blur radius.| [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 & Ajax | Adding a Text Drop Shadow</title> <style type="text/css" media="screen"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; text-shadow: none; } h1 { text-shadow:#f66 10px 12px 6px; } h2 { text-shadow:#999 3px 4px 2px; } .chapterTitle { text-shadow:none; } .author { text-shadow:#333 0px 2px 3px; } a:hover { text-shadow: #999 2px 2px 2px; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER V<br /> <span >Advice from a Caterpillar</span></h2> </div> <p>The Caterpillar and Alice looked at each other for some time in silence:at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> </body> </html>
|
| 2. | #f66
Type a space and then a color value for the shadow. See "Values and Units Used in this Book" in the Introduction for more detail on color values.
| 3. | 10px 12px
Type a space and then two positive or negative length values separated by a space. The first value is the vertical distance to offset the shadow (positive is down; negative is up). The second value is the horizontal offset (positive is right; negative is left).
| 4. | 6px;
Type a space and then a positive length value for the amount of blur to apply to the shadow.
|
 Tips
Keep in mind that although this is a "shadow" you can use any color for the shadow. Thus, if your text is on a dark background, you could use a light color to create a drop "glow" instead. Although this example uses several different shadow strengths, colors, and offsets, if you want to make the shadows look natural, their offsets should all be proportional to each other. The W3C is also suggesting the inclusion of a box-shadow property in CSS3 that works a lot like the text-shadow property, but would be applied to the elements box. This property is not implemented in any browser currently. Text shadows are great way to have links pop-off the page when used with the :hover pseudo class. The text-shadow property actually allows for multiple shadows on a single element. A comma separates each value list. However, Safari does not support this feature.
|
