Text-shadow is used to either get a shadow or an effect on a text element. You can pass multiple shadows to one text element. When you use text-shadow for a effect you may get totaly different resaults depending on the type of font you use. Lets take a look at the markup.
Regular black shadow
text-shadow: 1px /* X-coordinate of the text shadow - px/em */ 1px /* Y-coordinate of the text shadow - px/em */ 4px /* The blur radius of the text shadow - px/em */ black; /* Color of the text shadow - #/rgb/rgba/color name */
Lets create some different effects.
White highlight
This efffect is a little bit trendy at the moment. I use it in the menu on this site.
text-shadow: 0 1px 0 white;
Multiple shadows – 3D effect
text-shadow: 0 -1px 0 white, 0 1px 0 black;
Fiery Effect
text-shadow: 0 0 2px #aaa, 2px 2px 4px #ff3, 4px 12px 6px #fd3, 8px 15px 11px #f80, 8px 18px 18px #f20;
It is pretty simple. If you create something beautiful please leave a link in the comments.
Compatibility
- IE ≤ 8 no
- Firefox 3.1+
- Safari 3.0+
- Chrome 2+
- Opera 9.62+
- Konqueror 3.5.7+