Backgrounds, Borders, and More - Jump Start CSS - page 87

• Multiple shadows can be added to a single element by comma separated sets of val-
ues.
Inthiscase,ourboxshadowhasnohorizontal offsetandnoblur,anddoesnotusethe inset
keyword. Also, the color we're using is pure black (represented by three zeros in RGB,) and
we've added an alpha value, setting the transparency level of the black to 75% transparent (or
25% opaque). After adding these new styles, our <header> should look like Figure 3.13 .
Figure 3.13. A box shadow added to the bottom of the header
We'restillmissingthebackgroundonthe <header> ,whichisactuallyagradient—thatis,a
combination of colors, transitioned smoothly. We'll be discussing gradients later in the topic,
so we'll leave this as-is for now.
Adding a Shadow below the Promo Image
Whatelserequiresadropshadow?Belowthepromoimage,wehavesomethingalittletricky.
There's not only the drop shadow, but just above that there's a thick border, which is attached
tothe bottom ofthe promoimage. Ifwelookclosely at that border,wefindthat like the head-
er, it's actually a gradient, as shown in Figure 3.14 .