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

Custom Search