First, we have styled the <h1> tag with simple properties — a simple color, font-family set to Lucida Grande and increased font-size. Next, we styled two divs. The positions for both the divs are set to relative. This is important. Also notice that the z-index for the first div is higher than the second one. This is because we want the first div to appear over the second one.

Compromising for Internet Explorer

Unfortunately, it looks ugly on Internet Explorer. (I could not find any fix for it. If you have one, please share in the comments.) So, we use some javascript to show this effect only in Firefox.

First, we change the html a little bit. Instead of having two divs inside the <h1> tag, we let go of both of them. That is we should have,

The snippet first checks whether the browser is firefox or not. (Note that $.browser has been deprecated since jQuery 1.3. Here I am using an earlier version.) If the browser is Firefox, the snippet then parses each <h1> tag with class-name drop-shadow and replaces the text with two divs.

Welcome to Technabled.com

Technabled is a blog on everything technology. It is dedicated to helping you use technology in a better and effective way. The site offers tips, tricks, tutorials and reviews on softwares, web-applications, web-development. Enjoy your stay here. And don't forget to subscribe to the feed to stay connected.