CSS3 Examples

Text Shadow Effects in CSS3

Posted By: Santhosh | Jul 2nd, 2009

CSS3 allows you to apply shadows to text and eliminates the need of using Photoshop to do it. It is very simple and all you have to do is just add a new property to an element. It’s:

text-shadow: 2px 2px 2px #333;

This code will apply a gray show to the text. This effect can be seen on Safari 3 and above, Opera 9.5+, Firefox 3.1+, Konqueror and iCab.

If you are using one of the above mentioned browser, you must be able to see the shadow behind the title of this post. If not, here’s a small preview:
css3 text shadow

Some explanation about this property:

2px 2px 2px

…will add shadow in right-down direction.

0 2px 2px

..adds shadow in downwards direction.

2px 0 2px

…adds shadow towards right.

And as far shade is concerned, if your background is light in color, use the following colors: #000 or #333 or #666 or #999. This depends on the background color and as well as the color of the text to which you are applying the effect.


Latest Posts

Tags

under contruction..