Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy Text Drop Shadows

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-xSets the horizontal offset in pixels, to the right being positive
offset-ySets 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);

ColorSets the color of the shadow
Direction  Sets the direction that the shadow is offset, in degrees
StrengthSets 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:
• How to Use a Starburst on Your Web Page
• Easy Three-level Expanding Menu Code
• How to Make Images Responsive
• Easy Visual Effects to Spice Up Your Webpage
• CSS Transition Code For a Pulsating Button
• Easy Rollover Menu Code
• Spice Up Your Web Forms with Color and Graphics
• How to Overlay Text on an Image
• Create Animated Glowing Text
• Create a Cool Picture Frame Effect with CSS

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268