A Quick Note on Text Shadows

I was recently doing some work for a client and they had a menu that would appear over a background image. The background image would be different for each page. Unfortunately, the background image on some pages made the menu text difficult to read.

The designer thought it would be a good idea to have a drop shadow behind the text. This sounded good to me, except that I didn't know how to do that. Fortunately, it is really easy.

First, let's look at the effect:

As it turns out, there is a CSS declaration just for this called "text-shadow". This was originally added in CSS2 (and removed in CSS 2.1) and now part of the text module in CSS3.

Here is the CSS code used for this effect:

The first number of the x-offset. That is, the distance the shadow is moved to the right of the original text. The second number is the y-offset. That is, the distance the shadow is moved down from the original text. Negative numbers are allowed for both of these.

The last number is the blur radius. This is basically how much the shadow should be "smeared" out. This can quickly result in the text being illegible or even effectively invisible, so low values are typically used.

The color value is, of course, the color of the text shadow.

What about IE?

It practically goes without saying that this isn't supported in IE. Fortunately, IE has actually long had its own way to do this that doesn't get in the way of any other browser. That is by using a shadow filter. Filters in IE are actually pretty nifty. As they are exclusive to IE, however, I have never spent much time or energy learning them.

Here is the filter code that I used in this example:

Here the color value works the same and "Direction" indicates in what direction the shadow should move from the original text (I assume this is by degrees out of 360 from the top working around clockwise). The "Strength" is the distance it should be moved. The shadow filter, however, doesn't have a way to "blur" the shadow.

Another option for IE is the "DropShadow" filter:

Other Nifty Effects

The text-shadow declaration can actually be used to create multiple layers of shadows, for neat effect. See the W3C Text Shadow examples for more. Line25.com also has a good article on Using CSS Text-Shadow to Create Cool Text Effects.

Not all of these can be duplicated with IE filters, of course, but using text-shadow in combination with IE filters can provide more text styling options than you may have thought possible. It certainly allowed more flexibility than I had thougt possible.