Text-shadow, Photoshop like effects using CSS
CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:
text-shadow: 2px 2px 2px #000;
This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:
Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.
For anyone not using those browsers, here is a reference image (from Opera 9.5):
Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!
The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):
Multiple shadows are Hot
And here’s the reference image:
