Using Text Shadow in HTML/CSS

December 4th, 2009 by Teylor Feliz

In this post, I will discuss the topic of using text shadow in HTML/CSS. Text shadow is a property from CSS2, and what it does is simply apply shadow to the text. Moreover, text shadow allows you to create a somewhat moved or blurred copy of a piece of text, to do positioned or color shadows, to create the appearance of 3D effects, to create more than one shadow (which gives an interesting effect all its own), and to make many other interesting effects. It is an interesting variation to use in design, to shake things up and create a distinction on your design; however, I do not suggest overusing it. Below is some information about using text shadow in HTML/CSS that I hope you find useful. Please feel free to comment and leave your own ideas! Enjoy!

Syntax:

text-shadow: color x_offset y_offset blur_radius;

Where color is the color of the shadow, “x_offset” is the horizontal offset of the shadow, “y_offset” is the vertical offset of the shadow and “blur_radius” is how blur or smooth the shadow is going to be.

Example:

text-shadow: #000 5px 5px 2px;

Browsers with Support:

Currently, the following browsers support this feature: Opera 9.5+, Chrome, Firefox 3.5+, and Safari 1.1+. Historically, this feature was only supported by Safari, but now all recent major browsers support this property except IE.

What Can We Create?

We can create different effects with this property, we just need to be creative when using it. For example we can create bury text to emulate the IE ClearType feature. We just add a little gray shadow to the text without any offset or a blur of 2px. See Some Examples

Example:

.shadow {color:black;
         text-shadow: #000 0px 0px 2px;
        }

Special Case: Internet Explorer

So, if this property is not supported by IE, I am sure your next question is what can we do to fix this problem? IE has special features for since the DHTML time called filters. Two of those filters are DropShadow and Shadow.

DropShadow and Shadow create a solid outline of content of the object, which offset in the specified direction. This effect creates an illusion that the content has a shadow.

How Do We Use DropShadow?

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX, OffY, Color, Positive,Enabled);

Where “offX” is the horizontal offset of the shadow, “offY” is the vertical offset of the shadow, “Color” is the color of the shadow, “Positive” creates a shadow from the nontransparent pixels of the object (Always set the positive property to 0, that would let you create the shadow), and “Enabled” indicates if the filter is available.

Example:

eShadow{
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');
}

How Do We Use Shadow?

filter:progid:DXImageTransform.Microsoft.Shadow(Color, Direction, Strength,Enabled);

“Color” is the color of the shadow, “Direction” is where the shadow offset, “Strength” is the amount of pixels the filter would extend.

“Direction” receives an integer parameter and NOT in pixels as would be expecting to be. Examples of “Direction”:

Direction Value
Top 0
Right Top 45
Right 90
Bottom Right 135
Bottom 180
Bottom Left 225
Default Left 270
Top Left 315

Example:

.eiTextShadow{
	filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}

Further Information

Don’t take stress for 642-631 exam and 70-640 because testking 646-671 dumps are here. Test king is also the best source for 640-553 braindumps and 70-515 dumps.

Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Dominican Republic. He has more than 10 years experience in the computer programming, graphic design, and web development world, including 2 years teaching computer science. Teylor has a degree in Applied Sciences from the University of Louisiana and is completing a Master’s degree in IT with a concentration in Web Design and Development, at the University of Denver.

Subscribe to our RSS
Please help us to promote this article.
Tags: ,
Comments 7
  1. iCrackerjack says:
    December 5, 2009 at 8:47 pm

    Very cool effect – works like a charm!

  2. TS says:
    December 6, 2009 at 10:21 am

    Wow IE really sucks!

  3. favSHARE says:
    January 7, 2010 at 6:53 am

    This article has been shared on favSHARE.net. Go and vote it!

  4. Muhammad Shahid says:
    October 5, 2010 at 2:50 am

    Hi, can any body tell me that how to create a comprehensive javascript framework like Prototype, Jquery?

  5. Mario says:
    January 2, 2011 at 2:18 pm

    Teylor,

    Thanks for this. I’ve seen this done a few different ways but your method seems to work the best.

    The only problem i’m seeing is that IE seems to make the text absurdly coarse looking if i use this in an element that is later modified using JS.

    thanks for the comprehensive tutorial (and the Direction table!!)

    damn you IE! Damn you