Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.

The only problem that some people may see with this example is "duplicate content" because the title is shown twice in the HTML. I've decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)

<div class="post_title">
	<h1>Lorem ipsum dolor sit amet consectetuer</h1>
	<h6>Lorem ipsum dolor sit amet consectetuer</h6>
</div>

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}