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
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
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.
Search WWH ::

Custom Search