I know, we said we’ll focus on WordPress tutorials but, I can’t resist sharing cool CSS tricks from time to time like this one CSS shadow effect we’ve used for our Vela theme. If you take a look at Vela header you’ll see h1 and h2 text with blog title and description. Vela comes with two different background images, one is very colorful and the other one is dark, so to keep text readable in this situation you have to use shadow or text border. And since there’s no enough support for text-shadow CSS3 property (only for Safari so far) you have to improvise.

What we’re going to use is pure CSS solution, but you can use for example some JavaScript with a simple loop or something… Here’s the code and after that an explanation.

Yes, that’s all! Key element is span tag with same text which is positioned absolute and moved a bit. You can place it in any tag you want and also add links and everything like in example. This is tested on FF, IE6, IE7, IE8, Opera, Chrome and Safari.