Design elements: Shadow boxes 3 August 2005

<style type="text/css">
    .blur .t,
    .blur .r,
    .blur .b,
    .blur .l,
    .blur .c
    {
        position: relative;
        z-index: 1;
        display: block;
        background-repeat: no-repeat;
        background-position: left top;
        left: 0; top: 0;
    }
    .blur .t { left: -10px; top: -10px; }
    .blur .r { background-position: right top; left: 20px; }
    .blur .b { background-position: right bottom; top: 20px; }
    .blur .l { background-position: left bottom; left: -20px; }
    .blur .c { left: 10px; top: -10px; margin-right: 10px; }

    #example { background: #aeb0b1; }
    #example .blur { background: #ffffff; //border: 1px solid #ffffff; }
    #example .blur .t { background-image: url('blur-t.gif'); }
    #example .blur .r { background-image: url('blur-r.gif'); }
    #example .blur .b { background-image: url('blur-b.gif'); }
    #example .blur .l { background-image: url('blur-l.gif'); }
    #example .blur .reducer { padding: 1em; } 
</style>
<div id="example">
    <div class="blur"><div class="t"><div class="r">
    <div class="b"><div class="l"><div class="c">
        <div class="reducer">
            Any content
        </div>
    </div></div></div>
    </div></div></div>
</div>

<div style="position: relative; height: 7em;">
    <p>Any text the&nbsp;element overlaps.
        Try to&nbsp;change font color in&nbsp;your browser settings.</p>
    <div style="position: absolute; top: 0; left: 6em;">
        <div style="width: 10em; height: 100%;">
            <img src="shadow.png" width="1" height="1" alt=""
                style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"
                onload="if( this.runtimeStyle && this.src.match( /\.png$/ ) ){
                    this.runtimeStyle.filter
                        = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
                        + this.src
                        + ', sizingMethod=scale)';
                    this.src = '0.gif';
                }"
             />
            <div style="position: relative; background: white; margin: 1em; padding: 0.5em;">
                A&nbsp;message or a&nbsp;text input form.
            </div>
        </div>
    </div>
</div>