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

    HTML и CSSXSLTJavaScriptИзображенияСофт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>