Stacking Text with CSS

Only problem with this is that they are positioned based on the page itself. If you want to use this technique for the headings of a page that contain content the content will appear right under the text. Here's another way to do it that will give more control:

The CSS would be:

#text-top {
color:#099;
position:absolute;
left:-2px;
top:-2px;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}
#text-bottom {
color:#CCC;
position:relative;
left:12px;
top:12px;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}

The HTML:

<div id="text-bottom">Stacking Text
<div id="text-top">Stacking Text</div>
</div>

Oops didn't notice the left and top settings were still in the text-bottom css. You can remove those two lines since they aren't needed.