A Quick Note on Text Shadows

Posted At : October 26, 2011 11:15 AM | Posted By : Steve
Related Categories: CSS

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.

[More]

Comments (3) | Print | del.icio.us | Digg It! | Linking Blogs
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
Steve, good note on the text-shadow declaration. Note that you might also want to add vendor prefixes for some older browsers that don't support the non-prefixed declaration:
-moz-text-shadow: 2px 2px 1px black;
-webkit-text-shadow: 2px 2px 1px black;
text-shadow: 2px 2px 1px black;
# Posted By Tom Mollerus | 10/26/11 12:19 PM
Tom,

Great point!

It actually worked on every browser I tests on, but I can't remember how far back I went on each version. Incidentally, Adobe's BrowserLab is really nice for this sort of thing
# Posted By Steve Bryant | 10/27/11 9:43 AM
useless style content
# Posted By javed | 11/2/11 4:45 AM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.