Новые способы рисования теней и рамок элементов оформления

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

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

HTML XSLT JavaScript Etc

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

# Новые способы рисования теней и рамок элементов оформления 20 февраля 2006

Дорабатываем универсальный способ построения рамок у блоков до возможности использования 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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125

    <style type="text/css">
    .framed,
    .framed .f_r,
    .framed .f_b,
    .framed .f_l,
    .framed .f_c
    {
    float: left;
    position: relative; z-index: 1;
    width: auto; height: auto;
    margin: 0; padding: 0;
    }
    .framed .f_tt,
    .framed .f_rr,
    .framed .f_bb,
    .framed .f_ll
    {
    display: none;
    }
    .framed
    {
    margin: 0 30px 15px 0;
    background: url('hint-t.png') no-repeat left top;
    //background: none;
    }
    .framed .f_r
    {
    left: 30px;
    background: url('hint-r.png') no-repeat right top;
    //background: none;
    }
    .framed .f_b
    {
    top: 30px;
    background: url('hint-b.png') no-repeat right bottom;
    //background: none;
    }
    .framed .f_c
    {
    float: none;
    position: relative;
    left: 30px; top: -15px;
    padding: 1px 0; margin: 0 30px 0 0;
    background: #fffcb8;
    }
    .framed .f_l
    {
    left: -30px;
    padding: 15px 0;
    background: url('hint-l.png') no-repeat left bottom;
    //background: none;
    }
    * html .framed .f_r,
    * html .framed .f_b,
    * html .framed .f_l
    { height: 0; }
    * html .framed .f_tt,
    * html .framed .f_rr,
    * html .framed .f_bb,
    * html .framed .f_bb *,
    * html .framed .f_ll,
    * html .framed .f_ll *
    {
    display: block;
    position: absolute;
    left: 0; top: 0;
    }
    * html .framed .f_tt
    {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-t.png,sizingMethod=crop);
    }
    * html .framed .f_rr
    {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-r.png,sizingMethod=crop);
    }
    * html .framed .f_tt,
    * html .framed .f_bb
    {
    width: expression( parentNode.offsetWidth ); height: 30px;
    }
    * html .framed .f_rr,
    * html .framed .f_ll
    {
    width: 30px; height: expression( parentNode.offsetHeight );
    }
    * html .framed .f_bb,
    * html .framed .f_ll
    {
    overflow: hidden;
    }
    * html .framed .f_bb *
    {
    width: 3000px; height: 30px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-b.png,sizingMethod=crop);
    }
    * html .framed .f_ll *
    {
    width: 30px; height: 3000px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-l.png,sizingMethod=crop);
    }
    /* Исправляем неправильный расчет позиции при "нечетной ширине" */
    * html .framed .f_rr,
    * html .framed .f_bb *
    { right: expression( this.parentNode.offsetWidth % 2 ? -1 : 0 ); left: auto; }
    * html .framed .f_ll,
    * html .framed .f_ll *,
    * html .framed .f_bb,
    * html .framed .f_bb *
    { bottom: expression( this.parentNode.offsetHeight % 2 ? -1 : 0 ); top: auto; }
    </style>
    <div style="position: relative; height: 7em;">
        <p>Любой текст, поверх которого показывается элемент.</p>
        <div class="framed" style="position: absolute; left: 6em; top: 0.5em;">
            <div class="f_tt"></div>
            <div class="f_r"><div class="f_rr"></div>
                <div class="f_b"><div class="f_bb"><div></div></div>
                    <div class="f_l"><div class="f_ll"><div></div></div>
                        <div class="f_c">
                            Сообщение или форма ввода данных.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Используем таблицу для формирования тени. При определенных условиях, ведет себя некорректно в IE.

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

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

| Сообщение или форма ввода данных. |

    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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92

    <style type="text/css">
        .shadowed { empty-cells: show; }
        .shadowed .lt,
        .shadowed .l,
        .shadowed .lb
        { width: 31px; }
        .shadowed .lt
        {
        height: 58px;
        background: url(shadow-lt.png) no-repeat 100% 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-lt.png,sizingMethod=scale);
        }
        .shadowed .l
        {
        background: url(shadow-l.png) repeat-y;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-l.png,sizingMethod=scale);
        }
        .shadowed .lb
        {
        height: 58px;
        background: url(shadow-lb.png) no-repeat 100% 0;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-lb.png,sizingMethod=scale);
        }

        .shadowed .rt,
        .shadowed .r,
        .shadowed .rb
        { width: 31px; }
        .shadowed .rt
        {
        height: 58px;
        background: url(shadow-rt.png) no-repeat 0 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-rt.png,sizingMethod=scale);
        }
        .shadowed .r
        {
        background: url(shadow-r.png) repeat-y;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-r.png,sizingMethod=scale);
        }
        .shadowed .rb
        {
        height: 58px;
        background: url(shadow-rb.png) no-repeat 0 0;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-rb.png,sizingMethod=scale);
        }

        .shadowed .b
        {
        height: 58px;
        background: url(shadow-b.png) repeat-x 0 0;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow-b.png,sizingMethod=scale);
        }

        .shadowed .lt,
        .shadowed .l,
        .shadowed .lb,
        .shadowed .rt,
        .shadowed .r,
        .shadowed .rb,
        .shadowed .b
        { //background: none; }

        .shadowed .content
        {
        background: #ffffff;
        padding: 0.5em 1em;
        }
    </style>
    <div style="position: relative; height: 7em;">
        <p>Любой текст, поверх которого показывается элемент.</p>
        <table
            border="0" cellspacing="0" cellpadding="0" class="layout shadowed"
            style="position: absolute; top: -1em; left: 6em;"
        >
            <tr class="layout">
                <td class="layout lt"></td>
                <td class="layout content" rowspan="2">
                    <p>Сообщение или форма ввода данных.</p>
                </td>
                <td class="layout rt"></td>
            </tr>
            <tr class="layout">
                <td class="layout l"></td>
                <td class="layout r"></td>
            </tr>
            <tr class="layout">
                <td class="layout lb"></td>
                <td class="layout b"></td>
                <td class="layout rb"></td>
            </tr>
        </table>
    </div>

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