RU
 
  • Work
  • Store
  • Studio
  • Contact us
  • Ironov
  • Competencies
  • Fokus
    •

    		Technogrette



    HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
    Vladimir Tokmakov

    Improved techniques for making shadow boxes 20 February 2006

    Lets improve the earlier techniques to enable using PNG with transparent regions.

    How it looks in the browser

    Any text the element overlaps.

    A message or a text input form 
    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);
}
/* Correcting wrong position for odd width */
* 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>Any text the element overlaps.</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">
                        A message or a text input form
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    Use a tables to create the shadow. Under certain conditions may behave incorrectly in IE.

    How it looks in the browser

    Any text the element overlaps.

    A message or a text input form.

    		 
    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>Any text the element overlaps.</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>A message or a text input form.</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>

    © 1995–2020 Art. Lebedev Studio
    511 Avenue of the Americas, New York, USA, NY 10011
    mailbox@artlebedev.com
    Order a design...