The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

108 Chapter 9

The first value, inset, is an optional keyword that sets whether the

shadow sits inside or outside of the element. I explain this in more detail in

the next section; for now, all you need to know is that if inset is not speci-

fied, the shadow sits outside the element. The next two values are, just as

with text-shadow, lengths that set the horizontal and vertical distance of

the shadow from the box; if you want to have a shadow, these values are

required.

The next value sets the blur-radius and is another length value and,

again, works exactly as in text-shadow. Then you have spread, yet another

length value, which sets the distance the shadow spreads. A positive length

makes the shadow larger than its element, and a negative length makes it

smaller. Both blur-radius and spread are optional.

Finally you have the color value, also optional, which, if left unspecified,

defaults to the inherited color (usually black).

Now I’ll put these together in an example. The next code snippet cre-

ates a dark-gray shadow outside of the element, positioned at a distance of

4px, both horizontally and vertically, with a blur radius of 3px:

div { box-shadow: 4px 4px 3px #666; }

In the next code snippet, I demonstrate further examples of the effects

of different values on the box-shadow property. The results are shown in

Figure 9-13.

.shadow-one { box-shadow: 4px 4px; }

.shadow-two { box-shadow: 4px 4px 3px; }

.shadow-three { box-shadow: 12px 12px 2px -6px; }

.shadow-four { box-shadow: #999 4px -4px 2px 0; }

.shadow-five { box-shadow:

#999 4px -4px 2px 0,

-4px 4px 2px;

}

Figure 9-13: The effects of using different values for the box-shadow property

The elements in the code correspond to the boxes in Figure 9-13, mov-

ing from left to right. The first is the simplest shadow, simply distanced

4px both horizontally and vertically from the element, using the inherited

color. The second has the same distance values as the first but also adds a

blur radius of 3px to soften the shadow’s edges. The third has a distance

of 12px along both axes but a negative spread value (−6px), which makes

the shadow smaller than its box. The fourth example has a medium gray–

colored shadow with a negative vertical distance, meaning the shadow falls

above the element instead of below it.