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.

Get Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.