O'Reilly logo

Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition by Robin Nixon

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Box Shadows

To apply a box shadow, specify a horizontal and vertical offset from the object, the amount of blurring to add to the shadow, and the color to use, like this:

box-shadow:15px 15px 10px #888;

The two instances of 15px specify (in order) the horizontal and vertical offset from the element, and these values can be negative, zero, or positive. The 10px specifies the amount of blurring (about a quarter of a centimeter on the average display), with smaller values resulting in less blurring, and the #888 is the color for the shadow, which can be any valid color value (see CSS Colors in Chapter 18). The result of this declaration can be seen in Figure 19-4.

A box shadow displayed under an element
Figure 19-4. A box shadow displayed under an element

Note

You must use the -webkit- and -moz- prefixes to this property for WebKit- and Mozilla-based browsers.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required