WebCodeBench
PHP, CSS, HTML and other web code stuff

CSS3 How To: Use Text-Shadow Property

CSS3 How To: Use Text-Shadow Property

This is a very straightforward CSS3 property with wide browser support… except for IE. It works well when used subtly for header text (ie: not how I’ve done it!)

Text-Shadow Syntax

The syntax is very simple:

.textshadow {
    text-shadow: 1px 1px 2px #404040;
}

In order, the parameter values are:

  • horizontal offset (positive values offset to the right)
  • vertical offset (positive values offset downwards)
  • blur amount (zero = no blur)
  • shadow colour

You can use an rgba() format colour value, to add a transparency to the shadow, like so:

.textshadow {
    text-shadow: 1px 1px 2px rgba(35, 35, 35, 0.6);
}

You can also add multiple shadows to the same text, by simply listing shadow definitions one after another, separated by commas, like this (additional shadows will be rendered underneath earlier ones):

.textshadow {
    text-shadow: 1px 1px 2px #404040, 4px 4px 8px #808080;
}

Text-Shadow in Internet Explorer

Of course, IE doesn’t play ball. The Text-Shadow property is not supported, so you need to add the following:

.textshadow {
    text-shadow: 1px 1px 2px #404040;
    -ms-filter: "progid:DXImageTransform, Microsoft.Shadow(Strength=2, Direction=135, Color='#404040')";
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform, Microsoft.Shadow(Strength=2, Direction=135, Color='#404040');
}

You will also find that IE sometimes does some very strange things, depending on your foreground, background and shadow colours. Sometimes this will totally destroy the text anti-aliasing, resulting in completely corrupted/unreadable text. You’ll just have to experiment.

This entry was posted in CSS, CSS3. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.