text-shadow
2010-01-16 @ 14:57CSS3 shadows
Introduction
Did you know that CSS3 supports text shadows? A text shadow is what it sounds like, a shadow to a text, from all possible angles.
Values
offset-x – Horizontal position. A positive value place the shadow to the right.
offset-y – Vertical position. A positive value place the shadow to the bottom.
blur-radius – A higher value gives more blur.
color – The color of the shadow.
Examples
Single text shadow
This gives a shadow to the bottom right with a little blur with red color.
text-shadow: 5px 5px 3px #ba0000;
Multiple text shadows
The example gives us the ”CSS3 shadows” text (at the beginning of this page).
As you can see it almost looks like I created a white border around the text. Lower the blur value and put shadows in all directions to give that effect.
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 5px 5px 5px #000;
Works with (browsers)
- Full support – Chrome, Firefox, Safari
- Partial support – Opera
- No support – Internet Explorer