Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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