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
(TODO pic)
Blurry or glowing text, and fancier alternatives
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, from a mysterious glow:
TODO ...
or a simple, fuzzy blur:
TODO ...
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
cross-browser, accessibility etc
TODO compare to images, mention graceful degradation, and cross browser compatibility?
(template)
1. How the feature works.
2. How that feature compares to other similar features in other browsers.
3. Includes a demonstration and/or graphics that describe how it works.
4. Links to appropriate documentation in developer.mozilla.org.
Further resources
Documentation and Tutorials
- https://developer.mozilla.org/en/CSS/text-shadow
- http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
- http://www.quirksmode.org/css/textshadow.html