CHAPTER 9. CSS: THE STYLE SHEET 95
9.9 text-shadow: x y blur color
This is kind of a fun one. Thetext-shadow: property can be used to
display a shadow behind your lettering. This is almost like creating new
fonts. This can look very cool. Or it can look awful. Use your artistic
judgment.
Exam Question 169 (p.346): What CSS attribute: creates a shadow
behind your lettering?
Required Answer:text-shadow:
It has four parameters.
text-shadow: (x) (y) (blur) (color);
Here is an example.
h1 { text-shadow: 1px 2px 3px red; }
The first parameter, in this case 1px, is the (horizontal) x-offset for the
shadow. Positive numbers move the shadow to the right. Negative numbers
move the shadow to the left.
The second parameter, in this case 2px, is the (vertical) y-offset for the
shadow. Positive numbers move the shadow down. Negative numbers move
the shadow up.
The third parameter, in this case 3px, is the amount of blur. Small numbers
result in a crisp shadow. Large numbers result in a blurry shadow.
The fourth parameter, in this case red, is the color of the shadow. You can
use any method of specifying the color, including methods likergbathat
allowtransparency.
Neon Lights: You can create a neon lights effect by setting the x and y
offsets to zero. Use a sans-serif font, maybe with rounded ends.
Multi Shadow:You can have more than one shadow. Separate the speci-
fications with commas.
text-shadow: 1px 2px 3px red, 2px 4px 3px blue;
The second shadow will appear behind the first. The third shadow will
appear behind the second. Etc.
Textless Shadow:
You can also change the color of the text itself, perhaps to match the back-