Here is a simple trick to create drop shadows for headings without images. This technique is similar to the technique demonstrated in CSS Right Justify How-To that explains how to force an end-of-line or end-of-paragraph graphic to the right edge.

OUR DROP SHADOWOUR DROP SHADOW

Here the heading element (h1...h6) is styled position: relative; so it will become the positioning context for two span elements inside the heading element. Both spans contain exact copies of the heading text. The first is styled position: absolute; and z-index: 1;. The second is styled position: relative; and the top and left attributes take a value between 1px and 3px or however much shadow should show. It gets a color attribute value appropriate for the shadow: grey or a light desaturated tint of the background. Here is the code to make things clear.

    CSS Styles
    h4 {
        position: relative;
        border: 1px dotted #000;
        background-color: transparent;
        color: #000;
        font: bold normal 12pt/14pt verdana,helvetica,sans-serif;
        letter-spacing: 1px;
    }
    h4 .abs {
        position: absolute;
        /* These can be omitted and still produce satisfactory results */
        top: auto;                  /* Auto for DOM compliant browsers */
        top: position-static;       /* position-static for IE */
        left: auto;
        left: position-static;
        z-index: 1;                 /* z-index is needed */
    }
    h4 .rel {
        position: relative;
        top: 2px;
        left: 2px;
        color: #988;
    }

    HTML
    <h4>
        <span class="abs">This is What it Looks Like</span>
        <span class="rel">This is What it Looks Like</span>
    </h4>

This is What it Looks Like This is What it Looks Like

Without the z-index the shadow text will appear on top of the regular text, which usually looks bad.

The top and left attributes for the absolutely positioned element are optional when this technique is being used in a single line block element as it is here. Position-static is an IE proprietary value and auto is the DOM approved value. These values indicate that the absolutely positioned element should use its non-positioned (static) coordinates based on the elements position in the HTML as the top and left attribute values.

This works because an absolute positioned element doesn't take space in the normal flow of the HTML. It sits above the element following (with the aid of the z-index) and lets the following element occupy the same space. The relatively position element, which would be completely hidden by the absolutely positioned element, is then positioned just to the right and down from its regular (static) position to make the shadow.

In IE, the line height may need to be adjusted to get the desired relative vertical positioning