THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 248

SHADOWY STYLES
Ah, drop shadows. Remember drop shadows? In the mid-90's, everything had a drop shadow.
Of course, back then the shadows were baked into images and constructed with tables even
more tortuously convoluted than usual. Now you can relive the glory days with some fairly
simple CSS.

h ere are actually two properties available: text-shadow and box-shadow . Take the
former i rst. h e following CSS will result in the image shown in Figure 7-21.

h1 { text-shadow : gray 0.33em 0.25em 0.1em ;}

h e i rst length ( 0.33em ) indicates a horizontal of set; the second ( 0.25em ), a vertical of set.
h e third is a blur radius, which is the degree by which the shadow is blurred. h ese values
can use any length unit, so if you want to do all your shadow of sets and blurs in pixels, go to
town. Blurs can't be negative, but of sets can: A negative horizontal of set will push the
shadow to the let , and a negative vertical of set will go upward.

Figure 7-21: Dropping shadows from a heading.

250

You can, as in Figure 7-22, even have multiple shadows! Of course, whether you should is a
matter of opinion.

h1 { text-shadow : gray 0.33em 0.25em 0.1em, -10px 4px 7px blue ;}

Note that the color of a shadow can come before all the lengths or at er them, whichever you
prefer. Note also that the CSS 3 specii cation says that the i rst shadow is “on top,” which is
closest to you. Shadows at er that are placed successively further away from you as you look at
the page. h us, the gray shadow is placed over the top of the blue shadow.

Now to shadow boxes (see Figure 7-23). It's pretty much the same drill, only with a dif erent
property name.

h1 { box-shadow : gray 0.33em 0.25em 0.25em ;}

Figure 7-22: A heading with multiple shadows.