Рисование теней и рамок элементов оформления

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

3 августа 2005


Как это выглядит в браузере

Любой контент.
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
<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" style="margin-top: 10px">
    <div class="blur"><div class="t"><div class="r">
    <div class="b"><div class="l"><div class="c">
        <div class="reducer">
            Любой контент.
        </div>
    </div></div></div>
    </div></div></div>
</div>

Как это выглядит в браузере

Любой текст, поверх которого показывается элемент. Попробуйте изменить размер шрифта в браузере.

Сообщение или форма ввода данных.
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
<div style="position: relative; height: 7em;">
    <p>Любой текст, поверх которого показывается элемент.
        Попробуйте изменить размер шрифта в&nbsp;браузере.</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;">
                Сообщение или форма ввода данных.
            </div>
        </div>
    </div>
</div>