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

Figure 7-23: Shadowing the element box of a heading.

Even though there's no obvious element box for the h1 , a shadow is generated anyway. It's also
drawn only outside the element, which means that you can't see it behind/beneath the
element, even when the element has a transparent (or, with RGBA colors, semi-transparent)
background. h e shadows are drawn just beyond the border edge, so you're probably better
of putting a border or a visible background (or both) on any shadowed box.

You can have more than one box shadow, as depicted in Figure 7-24, just like you can with
text shadows.

h1 { box-shadow : gray 0.33em 0.25em 0.25em, -10px 2px 6px blue ;}

Figure 7-24: Multiple shadows on the element box of a heading.

Here's where I have to admit a small i b: h e previous examples are the ideal cases. As of this
writing, they wouldn't actually work in browsers. In fact, the i gures were produced using a
dif erent syntax than what's shown in the text. As of mid-2010, to make the single-shadow
example work, you'd actually need to say:

251

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

h at will cover all modern browsers as of mid-2010. Over time, the need for the prei xed
properties (-moz- and -webkit- ) will fade and you'll be able to just write the single
box-shadow declaration. When exactly will that happen? It all depends on your design, your
site's visitors, and your own sense of comfort.

If you also want to get drop shadows on boxes in older versions of Internet Explorer, then
you'll need to add in the IE-only Shadow i lter. See http://robertnyman.com/
2010/03/16/drop-shadow-with-css-for-all-web-browsers/ for details.

MULTIPLE BACKGROUNDS
One of the really nit y things in CSS 3 is its support for multiple background images on a
given element. If you've ever nested multiple div elements just to get a bunch of background
decorations to show up, this section is for you.