CSS Text Shadow

Text Shadow can be added to any HTML text using the CSS property text-shadow as follows:

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

But this property is not supported by most of the browsers including Internet Explorer 8.0. My trick allows you to add drop down shadow below HTML text using CSS which works in all the browsers. The trick here is to use two separate div tags aligned over each other using the z-index property of CSS. It might seem bit corny but it works if you desperately need drop down shadows below your text.
The two div tags are aligned absolutely with a difference of 2 pixels and the z-index of the original text is higher then that of the shadow text which keeps it above the shadow.

CSS Code:
.text {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: xx-large;
    font-weight: bolder;
    color: #000;
    position: absolute;
    z-index: 1;
    margin-top: 50px;
    margin-left: 50px;
}
.shadow {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: xx-large;
    font-weight: bolder;
    color: #CCC;
    position: absolute;
    z-index: 0;
    margin-top: 52px;
    margin-left: 52px;
}

HTML Code:
<div class="text">Shadowed Text</div>
<div class="shadow">Shadowed Text</div>

This same technique can be used on other HTML elements as well.

Technorati Tags: CSS,CSS Shadow Effect