Text effects are a great way to enhance your web designs, and with just one CSS property you can replicate effects that were only possible before by using images of text. Text-shadow is supported in all major browsers except IE, and along with RGBa colours, allows us to replicate some popular effects.
Text-shadow is easy to use and gives you a lot of control, letting you specify values for:
- The shadows colour (RGBa is great for subtle effects).
- The X position of the shadow, offset from the text.
- The Y position of the shadow, offset from the text.
- The blur radius or spread of the shadow.
And the syntax looks like this:
text-shadow: colour, x, y, radius;
For example:
text-shadow: #FFF 0px 1px 0px;
And the best part? You can have multiple shadows!
text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;
Here are some examples for uses of text-shadow.
The obvious use
Even a simple shadow is an easy way to add depth.
text-shadow: #999 1px 2px 3px;
Inset text
By using a sharp shadow (or two) with a tiny offset, you can give the impression of inset text.
text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;
3D
Multiple shadows with incremental offsets can be used to give your text thickness.
text-shadow: #00417f 0px 1px 0px, #00417f 0px 2px 0px, #00417f 0px 3px 0px;
Blur
While blurry text is hard to read, it could be used in some cases for effect.
text-shadow: #095eae 0px 0px 3px, #095eae 0px 0px 6px;
3D anaglyphic
This one is a novelty effect, but shows just how flexible the text-shadow property is. The colour of the text needs to be set as well, and RGBa is used so the text and shadow blend where they overlap.
color: rgba(0,255,255,0.5); text-shadow: rgba(255,0,0,0.5) -5px 0px 0px;
As you can see, text-shadow can be used in lots of interesting ways. Have you used the text-shadow property to enhance your web designs, and if so what effects did you use?
