The text-shadow property has already been introduced in CSS 2.0. However, this CSS property is implemented by a browser. In CSS 2.1, the text shadow property from CSS3 and only reinstated in power. Then began some browsers with the implementation of the text-shadow.
The browser implementation of the text shadow property has not, unfortunately, as hoped, adopted by all browsers.
Browser compatibility
Currently, the CSS text-shadow property is supported by the following browsers:
- Opera
- Chrome
- Safari
- Mozilla
- Konqueror
- iCab
How to use CSS3 text-shadow
1. Simple text-shadow
p {
color: #999999;
text-shadow: 1px 1px #333333;
}
And the result will be like this:
Text Shadow
2. 3D
p {
color: #92c3f2;
text-shadow:
1px 1px #3874b3,
2px 2px #3874b3,
3px 3px #3874b3,
4px 4px #3874b3,
5px 5px #3874b3,
6px 6px #3874b3;
}
And the result will be like this:
Text Shadow
3. stack
p {
color: #92c3f2;
text-shadow:
1px 0 #3874b3, 0 1px #1d3f60,
2px 1px #3874b3, 1px 2px #1d3f60,
3px 2px #3874b3, 2px 3px #1d3f60,
4px 3px #3874b3, 3px 4px #1d3f60,
5px 4px #3874b3, 4px 5px #1d3f60,
6px 5px #3874b3, 5px 6px #1d3f60,
6px 6px #3874b3;
}
And the result will be like this:
Text Shadow
4. Smooth
p{
color: #92c3f2;
text-shadow:
1px 0px 1px #3874b3, 0px 1px 1px #ccc,
2px 1px 1px #3874b3, 1px 2px 1px #ccc,
3px 2px 1px #3874b3, 2px 3px 1px #ccc,
4px 3px 1px #3874b3, 3px 4px 1px #ccc,
5px 4px 1px #3874b3, 4px 5px 1px #ccc,
6px 5px 1px #3874b3, 5px 6px 1px #ccc,
6px 6px 1px #3874b3;
}
And the result will be like this:
Text Shadow
5. Inset
p {
color: #92c3f2;
text-shadow: 0 -1px 1px #1d3f60, 0 1px 1px #FFFFFF;
}
And the result will be like this:
Text Shadow
6. Emboss
p {
color: #92c3f2;
text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666;
}
And the result will be like this:
Text Shadow
