HTML and CSS Reference
In-Depth Information
Using the Box-Shadow Property
A new property with CSS3 is the box-shadow (see Border Properties in Appendix D).
The box-shadow property allows designers to easily implement multiple drop shadows
(outer or inner) on box elements, specifying values for color, size, blur, and offset to a <div>
element. Table 4-4 lists the values that can be used with the box-shadow property.
Table 4-4 Box-Shadow Property
Value
Description
h-shadow
Required. The position of the horizontal shadow. Negative values are allowed. If positive, shadow
will be on the right of the box; if negative, shadow is on the left of the box.
v-shadow
Required. The position of the vertical shadow. Negative values are allowed. If negative, shadow
will be above the box; if positive, shadow is below the box.
blur
Optional. The blur distance. If set to 0 (zero), shadow will be sharp; the higher the number, the
more blurred it will be.
spread
Optional. The size of shadow.
color
Optional. The color of the shadow.
insert
Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.
You can use the box-shadow property to give an image a shadow. You can use an
inline style within the <img> tag to set a box-shadow around the oceanside.jpg banner
image as shown in Figure 4-12a on the next page. The following inline style is added to
the <img> tag:
<img src=”oceansidelogo.jpg” style=”box-shadow: 10px 10px 12px
#888888” />
(Note: All of the <img> tags shown in this section would also include the height, width, and
alt attributes for the image as per good coding standards. They are not shown here for clarity.)
In
the box-shadow property, the horizontal and vertical shadows are both set to 10 pixels as
shown in Figure 4-12a. The blur value is set to 12 pixels, and the shadow color is set to
gray (#888888). Figure 4-12b shows an example of the same code except that the horizon-
tal and vertical shadows are set to -10 pixels each as shown below.
<img src=”oceansidelogo.jpg” style=”box-shadow: -10px -10px
12px #888888” />
Finally, you can also layer shadows by using multiple box-shadow values separated
by a comma. When more than one shadow is specified, the shadows are layered front
to back. The following code offers an example of how the box-shadow property can be
customized for a unique effect as shown in Figure 4-12c.
<img src=”oceansidelogo.jpg” style=”box-shadow: 20px 20px 12px
darkgreen, -20px -20px 12px darkblue” />
