Способ реализовать 3D текст без картинок в браузере - Форум

<style type="text/css">
body{background:#000;padding:0;margin:0;font-family:Arial;color:#FFF}
#text{
position:absolute;
font-size:150px;
z-index:3;
top:100px;
left:150;
color:#777;
font-family:"Arial Black",Gadget,sans-serif;
text-shadow:
1px 0 1px #111,    
0 -1px 1px #555,    
2px -1px 1px #111,    
1px -2px 1px #555,    
3px -2px 1px #111,    
2px -3px 1px #555,    
4px -3px 1px #111,
3px -4px 1px #555,    
5px -4px 1px #111,    
4px -5px 1px #555,    
6px -5px 1px #111,    
5px -6px 1px #555,
7px -6px 1px #111,    
6px -7px 1px #555,
8px -7px 1px #111,    
7px -8px 1px #555,
9px -8px 1px #111,
8px -9px 1px #555,
10px -9px 1px #111,
9px -10px 1px #555,
11px -10px 1px #111,
10px -11px 1px #555,
12px -11px 1px #111,    
11px -12px 1px #555,
13px -12px 1px #111,    
12px -13px 1px #555,
14px -13px 1px #111,
13px -14px 1px #555,
15px -14px 1px #111;
}
#shadow{
position:absolute;
left:70px;
top:90px;
color:rgba(0,0,0,.0);
z-index:2;
text-shadow:0 0 10px #000;
/* background: -moz-linear-gradient(left, #000, rgba(0,0,0,.1)); */
transform: skewx(-45deg) translatex(150px);
-moz-transform: skewx(-45deg) translatex(150px);
-ms-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
-webkit-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
font-size:150px;
font-family:"Arial Black",Gadget,sans-serif;
}
#relative{
position:relative;
width:500px;
overflow:hidden
}
#light{
opacity:.3;
position:absolute;
top:230px;
left:110px;
transform: skewx(-45deg) translatex(150px);
-moz-transform: skewx(-45deg) translatex(150px);
-ms-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
-webkit-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
width:370px;
height:1px;
box-shadow: 0 0 150px 100px #FFF;
-moz-box-shadow: 0 0 150px 100px #FFF;
-webkit-box-shadow: 0 0 150px 100px #FFF;
}

#f,#t{color:#888}
#r,#s{color:#999}
#o{color:#AAA}

#css3D{
border:1px solid #333;
height:500px;
width:900px;
position:relative;
top:0px;
left:0px;
cursor:default;
}
.text{
z-index:1!important;
top:219px!important;
opacity:.03;
transform: matrix(1, 0 , 0, -1, 0, 0);
-moz-transform: matrix(1, 0 , 0, -1, 0, 0);
-webkit-transform: matrix(1, 0 , 0, -1, 0, 0);
-o-transform: matrix(1, 0 , 0, -1, 0, 0);
text-shadow:
1px 0 0 #111,    
0 -1px 0 #000,    
2px 1px 0 #111,    
1px 2px 0 #000,    
3px 2px 0 #111,    
2px 3px 0 #000,    
4px 3px 0 #111,
3px 4px 0 #000,    
5px 4px 0 #111,    
4px 5px 0 #000,    
6px 5px 0 #111,    
5px 6px 0 #000,    
7px 6px 0 #111,    
6px 7px 0 #000,    
8px 7px 0 #111,    
7px 8px 0 #000,    
9px 8px 0 #111,
8px 9px 0 #000,    
10px 9px 0 #111,
9px 10px 0 #000,    
11px 10px 0 #111,
10px 11px 0 #000,    
12px 11px 0 #111,    
11px 12px 0 #000,    
13px 12px 0 #111,    
12px 13px 0 #000,    
14px 13px 0 #111,
13px 14px 0 #000,    
15px 14px 0 #111!important;
}
</style>
<div id="css3D">
<div id="text"><b id="f">F</b><b id="r">R</b><b id="o">O</b><b id="s">S</b><b id="t">T</b></div>
<div id="text" class="text"><b id="f">F</b><b id="r">R</b><b id="o">O</b><b id="s">S</b><b id="t">T</b></div>
<span id="shadow">FROST</span>
<div id="light"></div>
</div>
<h1>No pictures!</h1>