Evangelism/Firefox3.5/35Days/Articles/text-shadow

	THIS PAGE IS A WORKING DRAFT
	The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page.

The text-shadow property in CSS3

The text-shadow CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow.

The text-shadow property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3 and has now made it into the new Firefox 3.5.

How it works

According to the CSS3 specification, the text-shadow property can have the following values:

none | [<shadow>, ] * <shadow>,

while <shadow> is defined as:

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

where the first two lengths represent the offset and the third an optional blur radius.

We can make a simple shadow like this, for example:

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

A simple shadow

(All of the examples are a live example first, then a picture of the working feature -- so you can compare your browser's behavior with the one of Firefox 3.5 on OS X)

If you are a fan of hard edges, you can just refrain from using a blur radius altogether:

 text-shadow: 2px 2px 3px #888; 

I don't like blurs

Glowing text, and multiple shadows

But due to the flexibility of the feature, the fun does not stop here. By varying the text offset, blur radius, and of course the color, you can achieve various effects, a mysterious glow for example:

 text-shadow: 1px 1px 6px #fff;

Glowing text

or a simple, fuzzy blur:

 text-shadow: 0px 0px 12px #000;

Blurry text

Finally, you can add more than one shadow, allowing you to create pretty "hot" effects (courtesy of css3.info):

 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

Multiple shadows are hot

By the way, the amount of text-shadows you can apply at the same time in Firefox 3.5 is -- in theory -- unlimited, though you may want to stick with a reasonable amount.

Like all CSS properties, you can modify text-shadow on the fly using JavaScript:

Animated shadows with JavaScript

<a href="#" onclick="textshadow.toggleAnimation();return false;">Start/stop animation</a>

<script type="text/javascript"> var textshadow = {

   colors: [
       '#f00', '#0f0', '#00f'
   ],
   shadows: [
       '0 -10px 2px',
       '10px 10px 2px',
       '-10px 10px 2px'
   ],
   state: [0, 1, 2],
   
   animate: function() {
       var t = document.getElementById('animationtext');
       var s = ;
       for (var i = 0; i < 3; i++) {
           if (s) s += ", ";
           var myshadows = this.shadows[this.state[i]];
           s += myshadows + ' ' + this.colors[i];
           this.state[i] = ++this.state[i] % 3; /* rotate */
       }
       t.style.textShadow = s;
   },
   
   toggleAnimation: function() {
       if (this.handle) {
           window.clearInterval(this.handle);
           this.handle = false;
           var t = document.getElementById('animationtext');
           t.style.textShadow = ;
       } else {
           this.handle = window.setInterval(function() { textshadow.animate(); }, 100);
       }
       return false;
   }

} </script>

Performance, Accessibility and Cross-Browser Compatibility

The times of using pictures (or even worse, Flash) for text shadows on the web are counted.

First, not using pictures for text is a good thing, both performance-wise (it saves HTTP connections and bandwidth) and when it comes to accessibility, as screen readers, page zoom (both on desktops and mobile devices), as well as other a11y features will remain unimpaired by text-shadow's eye candy.

Second, there is good news: The feature is largely cross-browser compatible:

• Opera supports text-shadow since version 9.5. According to the Mozilla Developer Center, Opera 9.x supports up to 6 concurrent shadows.
• Safari has had the feature since version 1.1 already (and other WebKit-based browsers along with it).
• Internet Explorer does not support the text-shadow property, but the feature degrades gracefully to regular text. In addition, if you want to emulate some of the text-shadow functionality in MSIE, you can use Microsoft's proprietary Shadow and DropShadow filters.
• Similarly to MSIE, when other, older browsers do not support the feature (including Firefox 3 and older), they will just show the regular text without any shadows.

A caveat worth mentioning is the drawing order: While Opera 9.x adheres to the CSS2 painting order (i.e., the first specified shadow is drawn at the bottom), Firefox 3.5 adheres to the CSS3 painting order (the first specified shadow is on top). Keep this in mind when drawing multiple shadows.

Conclusions

text-shadow is a subtle but powerful CSS feature that is -- now that it is supported by Firefox 3.5 -- likely to be widely adopted across the web in the foreseeable future. Due to its graceful degradation in older browsers, it can safely be used by developers and will, over time, be seen by more and more users.

Finally, some words of wisdom: Like any eye candy, use it like salt in a soup -- with moderation, not by the bucket. If the web developers of the world overdo it, text-shadow may die a short, yet painful death. It would be sad if we make users flinch at the sight of text shadows like typography geeks at the sight of "Papyrus", and thus needed to bury the feature deeply in our treasure chest.

That being said: Go try it out!

Further resources

Documentation

• https://developer.mozilla.org/en/CSS/text-shadow
• http://www.quirksmode.org/css/textshadow.html
• http://www.w3.org/TR/css3-text/#text-shadow

Examples

• http://maettig.com/code/css/text-shadow.html
• http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=273985
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=197360