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
text-shadow
, :before
and a little bit of cheating.
text-shadow
text-shadow
text-shadow
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.