Foundation HTML5 with CSS3

Putting it All Together

indicates the vertical offset on the y-axis. Negative offset values position the shadow to the left or

top of the element, positive lengths offset the shadow down and to the right, and 0 indicates no

offset at all.

 blur radius: A third, optional length value indicates the amount of blur to apply to the shadow.

Higher values indicate more blur, and a blur radius of 0 (the default) indicates a shadow with no

blur and a sharp outline.

 spread radius: A fourth, optional length indicates the overall size of the shadow, creating the

illusion that the element is either closer to or further in front of the surface on which it casts its

shadow. Higher values indicate larger shadows and lower values reduce the shadow’s size,

including negative values to make the shadow smaller than the element casting it. If not specified,

or if specified as 0 (the default), the shadow will be the same size as the element.

 color: Specifies the color of the shadow using any valid color notation (keyword, hexadecimal,

RGB, RGBA, HSL, or HSLA). This value isn’t technically required, and Firefox, Opera, and IE will

use the inherited color value for the default shadow if it isn’t otherwise indicated. At the time

we’re writing this, Webkit browsers (Chrome and Safari) default to a transparent shadow,

meaning they render no shadow at all if you don’t specify the color.

 inset: When present, this optional keyword indicates that the shadow should appear inside the

element rather than outside it. Inset shadows appear in front of any background color or images

and behind any content. If inset isn’t specified the shadow will appear outside, below, or behind

the element.

The length values for offset-x, offset-y, blur radius, and spread radius must appear in that specific order;
it’s the only way a browser can determine what value applies to which aspect of the shadow. The blur
radius and spread radius values are optional, but if you want to specify a spread radius you’ll have to
include the blur radius as well, even if it’s 0 , just to preserve the order of values.

Getting back to the Power Outfitters site, we’ll add box shadows to several of our content blocks, including
the store info box, the main navigation bar, the content wrapper, the footer, and product images. All of
these shadows make the elements appear to lift off the page to add a hint of dimensionality to what would
otherwise be a flat, two-dimensional design.

We’ve added box-shadow declarations to the footer rule in Listing 10-24, to show just one example. We’re
using an RGBA color (black at 25% opacity) so the shadow can seamlessly overlay whatever colors or
patterns are behind it. When we’ve used translucent RGBA colors for backgrounds we typically provide an
opaque value for older browsers, like we’ve done for this footer’s background. That isn’t necessary for box
shadows; every browser that currently supports CSS3 box shadows also supports RGBA color.

Listing 10-24. Adding a box shadow to the site’s footer

#site-info {
padding: 15px 30px 0 160px;
border: 2px solid #ffc307;
margin-top: 20px;
background: #fc0 url(../images/logo-small.png) 20px 15px no-repeat;
background-color: rgba(255,225,105,.8);