HTML5 and CSS3 Advent 2011

Shady text effects

There are a lot of situations where you want to give your headings just that little bit of extra. With wide support for text-shadow we are able to add all kinds of effects and best of all, they're very easy to implement.

Examples

Isometric!
Isometric projection by using text-shadow, :before and a little bit of cheating.
3-D
3-D
Creating 3-D effects by offsetting text-shadow
Neon
Neon lights with text-shadow
Inset
All done with text-shadow
Retro
Without a blur radius

How does it work?

All of the examples use text-shadow with or without a combination of other techniques to achieve the desired effects. The best thing about text-shadow is that you can define multiple shadows with varying offsets, colors and blur-radiuses. This is best seen in the retro example where we've set two white shadow's (without blur) with a 1px and 2px offset followed by 4 shadows in gray (3px to 6px offsets).

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012