Easy Text Drop Shadows
By Stephen Bucaro
Easy Text Drop Shadows
A text drop shadow is a nice effect, but it used to require you to use a graphics
editor to create a image text. CSS3 introduces the text-shadow property which makes
it easy to create text drop shadows without using graphics. The values required
for the text-shadow property are shown below.
text-shadow: offset-x offset-y blur-radius color;
| offset-x | Sets the horizontal offset in pixels, to the right being positive |
| offset-y | Sets the verticle offset in pixels, downward being positive |
| blur-radius | Sets the size of the shadow |
| color | Sets the color of the shadow |
All modern browsers support CSS3 except (guess which one) Internet Explorer Version 8.
However, Internet Explorer has its own proprietary shadow filter that does the same thing.
The values required for the text-shadow property are shown below.
filter:progid:DXImageTransform.Microsoft.shadow(Color, direction, strength);
| Color | Sets the color of the shadow |
| Direction | Sets the direction that the shadow is offset, in degrees |
| Strength | Sets size of the shadow (the extent) in pixels |
The trick is to place both the CSS3 text-shadow property and the Microsoft shadow filter
in your style specification. Each browser will ignore the property that it doesn't understand.
<p style="font-family:verdana; font-size:20px; color:0000ff; width:250;
text-shadow: 2px 2px 2px #000000;
filter:progid:DXImageTransform.Microsoft.shadow(color=#000000, direction=135, strength=4);">
Easy Text Drop Shadows</p>
Shown above is the code for the example text drop shadow. Note that besides the font
and color properties, it specifies the width. The Microsoft shadow filter fails unless
you include a width property.
More Easy Cascading Style Sheets:
• Spice Up Your Web Forms with Color and Graphics
• How to Use a Pull Quote
• How to Center a DIV Within a DIV
• Code to Move the Scrollbar to the Left Side
• How to Center a DIV
• Setting a Larger First Letter
• Code for Horizontal Drop-down Menu Bar
• How to Overlay Text on an Image
• How to Use a Starburst on Your Web Page
• CSS to Use an Image as a Mask
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
