How to CSS3 Text Shadow
One of the most cool features of the CSS3 is the Text Shadow property.
You can add shadow to your text instead of using the images like we all did in the past.
How the Text Shadow works?
text-shadow: 2px 2px 2px #000;
The meaning of the parameters it’s something like:
text-shadow: X, Y, Blur, Color;
Wich broswers allow Text Shadow?
You can use this nice style in:
- Mozilla Firefox
- Google Chrome
- Safari
And NO, not in Internet Explorer ( 6, 7 & 8 ) 
Text Shadow Examples
Developer’s Blog
<p style="text-shadow:2px 2px 2px #FF0000; font-size:18px; font-weight:bold;">Developer's Blog</p>
And the image if your browser don’t allow CSS3…
Now a cooler one:
Developer’s Blog
The code…
<div style="background-color:#A9D767; text-shadow:2px 2px 2px #000000;color:#FFFFFF; font-size:40px;">Developer's Blog</div>
And the image…
Feel free to play with it and make your own tests
Related PostsIf you liked How to CSS3 Text Shadow; the posts below might interest you too:
|
May 8, 2010
04:04
Text Shadow effect used in the right way is awesome and really makes your design to pop out. Lets wait for IE, surely it will support the vast majority of CSS3 specifications and text shadow.
BTW I like your blog, useful posts and easy to read, keep the good work, you’ve got a reader here.
May 8, 2010
10:54
Yep even if you can do the same with an image.
Works better for SEO and it’s faster to develop.
I’m already using CSS3 styles here in Developer’s Blog and I don’t give a damn about IE users. They will not see the effects
I glad you liked it.
Regards