Alas, support for the text-shadow CSS property is not included in the forthcoming release of Internet Explorer. This is a real shame because it lets us create some really interesting effects.
The text-shadow property
The text-shadow CSS property looks like a cross between margin or padding and a color property:
text-shadow: #000 2px 2px 5px;
The values represent the colour of the shadow (can be rgba of course), the left/right offset, the up/down offset and the blur amount. This is fairly straightforward and well documented in the blogosphere.
What’s less commonly known are the fact that you can use the same property to assign multiple shadows to one element – and even stack shadows to create a pseudo 3D effect.
Multiple shadows
To give an element multiple shadows, simply comma-separate the shadow values.
text-shadow: black 2px 2px 1px, red -10px -10px 3px;
Stacked shadows
Stacked shadows are the same as multiple shadows except that the same shadow is repeated and each one is offset by only one pixel at a time.
The only limitation for stacked shadows is that the color value has to be a solid colour. If you use rgba for semi-transparent colours the stacking effect will not work as well.
David Desandro’s website makes great use of this technique.
