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

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков

# Рисование теней и рамок элементов оформления 3 августа 2005

| Придумываем универсальный способ построения рамок у блоков без использования PNG. | См. также улучшенный вариант

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

Любой контент.

    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">
        <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>

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |