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:
• Easy Rollover Menu Code
• Easier Expanding Menu Code
• How to Color Alternating Rows or Columns in a Table
• Style Your Imagemap Tooltips
• Create Custom Horizontal Rules
• Using the HSL Color Specification
• Create Animated Glowing Text
• Spice Up Your Web Forms with Color and Graphics
• Basic Introduction to Simple Responsive Design With Code
• How to Make Images Responsive
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
