Рисование теней и рамок элементов оформления
Как это выглядит в браузере
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>Любой текст, поверх которого показывается элемент.
Попробуйте изменить размер шрифта в браузере.</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>
|