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

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>