Text shadows

We should strive to learn everyday, especially in computers.  Just because you did something yesterday one way, doesn't mean that there isn't a better way to do it today.

Case in point is today and what I learned about text shadows.  Besides making text look more attractive, shadows can improve contrast and readability when using a text color that doesn't pop as well with the background as you would like.

 I was building a web page and wanted the colors of the headings to match the colors in the logo graphic.  The colors were blue and gold, and the gold header didn't pop against a egg-shell background.  I said "I need a drop shadow here."

In the past, I would have went to the GIMP (my favorite image editor.  It's free and very powerful.) and created a graphic with the text shadow.  But, I heard of a CSS property, text-shadow, that would do it. I tried it and it worked wonderfully.  Well, wonderfully in everything but IE.  But, since 54% of the desktop market runs IE, this will not do.

While nobody has ever accused Microsoft of being standards-compliant, they aren't slackers either.  There's usually a Microsoft-specific way of doing something when the compliant-specific way doesn't work.

And, of course, there is.  I found a really handy filter to use from Heygrady.com .  Please note:  it's not fast, so if your page is a bandwidth-hog, use the graphics method instead.

The code would be

h1{
text-shadow: 2px 2px 2px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2,color=000000);}

The great thing about this is that everybody but IE ignores the filter property, and IE ignores the text-shadow property.