HTML and CSS Reference
In-Depth Information
Creating Text and Box Shadows
• To create a text shadow, apply the style
text-shadow:
color offsetX offsetY blur
;
where
color
is the color of the shadow,
offsetX
and
offsetY
are the displacements
of the shadow from the text in the horizontal and vertical directions, and
blur
is the
size of the blurring effect.
• To apply a drop shadow to a page element, use the style
box-shadow: [inset]
color offsetX offsetY blur
[
spread
];
where the optional
inset
keyword places the shadow within the object, and the
optional
spread
value increases or decreases the size of the shadow relative to the
size of the object.
At the time of this writing, no version of Internet Explorer supports the
text-shadow
style. Shortly you'll learn how to create such text shadows using an Internet Explorer
browser extension. But for Kevin's Web site, you'll use the CSS3
text-shadow
style to
apply an embossed effect to the
h1
heading in the document—making it appear as if the
letters in the heading are raised out from the page.
To apply the
text-shadow
style:
◗
1.
In your text editor, open the
effectstxt.css
file from the tutorial.08/tutorial folder.
Enter
your name
and
the date
in the comment section of the file. Save the file as
effects.css
.
◗
2.
Below the comment section, enter the following style rule as shown in Figure 8-4:
/* Heading text style */
section#main h1 {
color: rgb(90, 127, 0);
text-shadow: black 1px 1px 0px,
rgba(90, 127, 0, 0.7) 5px 5px 10px;
}
figure 8-4
Adding text shadows to the h1 heading
displays a black shadow 1 pixel
down and to the
r
ight from the text
changes
t
he font color to
medium green
displays a semi-transparent
green shadow 5 pixels
down an
d to the right
w
ith
a 10-pixel blur radius
◗
3.
Save your changes to the file.
◗
4.
Return to the
treebook.htm
file in your text editor. Directly below the
link
element for the
layout.css
style sheet, insert another
link
element that links the
document to the
effects.css
style sheet file.
