9.6. Shadowed Text Without Graphics
One of the most effective ways of setting off a headline and giving a Web page a professional look and feel, is to use shadowed text, or text that looks like it's standing off the page with a shadow behind it. All graphics tools make the creation of such text effects trivial, but they all suffer from one drawback: the text they draw is not true string text that can be searched, indexed, or translated into other languages. And, as graphics, they'll always tend to load more slowly than pure text.
Using CSS positioning[3], you can create shadowed text effects that are as good as any graphics program, without giving up the advantages of pure text on your Web page.
[3] In fact, CSS2 has a text-shadow property that is intended to achieve this effect. Unfortunately, no currently-available browser supports it. See Appendix B, for details on this property if you're curious.
Figure 9-16 shows a line of shadowed headline text. You can't tell here, but the text is red and the background shadow is gray.
Figure 9-16. Creating Shadowed Text Effect Without Graphics
Here's the HTML that generates the page in Figure 9-16.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shadow Text With No Graphics</title>
</head>
<body>
<div style="position:relative;">
<h1 style="color:red; position:relative; z-index:2">
This is a cool shadow effect using no graphics
</h1>
<h1 style="color:gray; position:absolute; left:3px;
top:3px; z-index:1; margin:0;">
This is a cool shadow effect using no graphics
</h1>
</div>
<p>Some body text here, just to show that the heading
occupies the correct amount of space despite the
positioning properties.</p>
</body>
</html>
I create a div element to contain the two pieces of text I want to position to create the shadowed effect. The div's position property is set to relative so that I can position the elements inside it (the two h1 tags) relative to the position of the div, rather than that of the page (i.e. it creates a positioning context for its children). I use relative positioning on the 'real' heading, so that it can float above the shadow (you can't assign a z-index value to statically-positioned elements), while occupying the correct amount of space. And, I use absolute positioning on the shadow (so that it can float behind the heading without occupying space on the page), indenting it slightly to the right, and down from the position of the 'real' heading.
The margin: 0 on the shadow div is there prevent some browsers (most notably, Mozilla) from adding a margin to the top of the shadow h1.