Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 256

The color property accepts values as a hex code, rgb(), or literal color. This property
changes the color of the shadow. Since the topic is printed in black and white, demonstrating
the use of this parameter will not present well. So, in your own code, change the color of the
shadow to see what effect it has—the color should change.

NOTE UNDERSTANDING H-SHADOW AND V-SHADOW PARAMETERS

h-shadow and v-shadow parameters can accept negative values. To place the shadow on
the left side of the box instead of the right, specify a negative value for the h-shadow . To
place the shadow on top of the box instead of the bottom, specify a negative value for the
v-shadow parameter.

Text shadows can be created in the same way as box shadows. The CSS property to apply
a shadow to text is called text-shadow . The text-shadow property has parameters similar to
those of the box-shadow property. The parameters are described in Table 4-6.

TABLE 4-6 Text-shadow parameters

Parameter Description

Specifies the position of the shadow along the horizontal axis. This value accepts nega-
tive numbers.

h-shadow

Specifies the position of the shadow along the vertical axis. This value accepts negative
numbers.

v-shadow

Specifies the distance of the blur effect. This parameter is optional and defaults to 0. blur

Specifies the color of the shadow. color

All of the text-shadow parameters are familiar. They all have the same effect as their
counterparts in the box-shadow element. The following code demonstrates applying a
shadow effect to text on an HTML page:

p {
position: absolute;
left: 250px;
top: 250px;
text-shadow: -10px -10px;
}

In this example, negative numbers are supplied to the h-shadow and v-shadow parameters
in order to place the shadow to the top left of the text. The output of this code is shown in
Figure 4-24.