HTML and CSS Reference
In-Depth Information
◗
5.
Save your changes, and then reopen the
treebook.htm
file in a non-Internet
Explorer browser that supports CSS3. Figure 8-5 shows the current appearance of
the page heading in the Google Chrome browser.
figure 8-5
heading text with an embossed effect
Next, you'll add shadows to other page elements.
You can animate your
hyperlinks by adding a
visual effect to the
hover
pseudo-class so that the
effect is applied whenever
a user moves the mouse
pointer over the link.
Creating a Box Shadow
The CSS3 style to add a drop shadow to any page object is
box-shadow: [inset]
color offsetX offsetY blur
[
spread
];
where
color
,
offsetX
,
offsetY
, and
blur
have the same meanings as they do for text
shadows.
The
inset
keyword is an optional keyword to display shadows within the object.
The meanings of the
offsetX
and
offsetY
values are switched when used with inset
shadows. Positive
offsetX
and
offsetY
values move the inset shadow to the left and
up, while negative values move the shadow to the right and down. For example, the
box-shadow
style
box-shadow: inset rgb(231, 231, 231) 5px 5px 10px;
creates a light gray border in the
upper-left
interior corner of the object and
not
the
lower-right corner.
Finally, the default size of the box shadow is equal to the size of the object; however,
the optional
spread
value allows you to increase or decrease the size of the shadow
relative to the size of the element. The
box-shadow
style
box-shadow: rgb(211, 211, 252) 0px 10px 5px 20px;
creates a light blue shadow 10 pixels below the object but 20 pixels larger in width
and height. To decrease the size of the shadow, you use a negative value for the
spread
parameter.
As with the
text-shadow
style, you can apply multiple box shadows by creating a
comma-separated list of shadow values as follows
box-shadow:
shadow
,
shadow
,
… ;
where
shadow
is a shadow style. Once again, shadows are applied in the order listed,
with the initial shadows displayed on top of subsequent shadows. Figure 8-6 shows
some applications of the
box-shadow
style. You can also view an interactive demo of the
box-shadow
style using the
demo_box_shadows.htm
file in the tutorial.08/demo folder.
