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:
• Setting a Larger First Letter
• Create CSS Button Rollovers
• CSS Transition Code For a Pulsating Button
• Create a Cool Picture Frame Effect with CSS
• Code to Move the Scrollbar to the Left Side
• How to Use a Starburst on Your Web Page
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• Easy CSS Buttons
• Code for Horizontal Drop-down Menu Bar
• Pro CSS Techniques

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-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268