Text Shadow

The box-shadow add shadows to boxes, where as text-shadow adds shadows to individual characters in text nodes.

The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; except that there’s no spread, and inset shadows aren’t allowed:

snippet
/* single shadow */
text-shadow: topOffset leftOffset blurRadius color;

/* multiple shadows */
text-shadow: topOffset1 leftOffset1 blurRadius1 color1,
topOffset2 leftOffset2 blurRadius2 color2,
topOffset3 leftOffset3 blurRadius3 color3;

Like box-shadow, when multiple shadows are declared, they’re displayed from front to back with the first shadow being the topmost. Text shadows appear behind the text itself.

An example of test-shadow.
snippet
text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);

In the above example, the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.

Other examples:
snippet
h1, h2, h3 {
text-transform: uppercase;
text-shadow: 1px 1px #FFFFFF;
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +