Niste ni bili svesni koliko je CSS3 moćna “tehnologija”, ali kad ovo vidite shvatićete. Naime, uz pomoć ovog koda možete da nacrtate lupu. Iako nema praktične svrhe, dobro je za zabavu ali i učenje a i pokazuje kako će uskoro u veb dizajnu sve više slika biti zamenjeno CSS-om.
Evo koda:
CSS
[css]
#handle {
width: 300px;
height: 40px;
position: absolute;
margin: 400px 200px;
background: #000;
background: -moz-linear-gradient(90deg, #000, #333);
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-box-shadow: -10px -10px 40px #aaa;
box-shadow: -10px -10px 40px #aaa;
-webkit-box-shadow: -10px -10px 40px #aaa;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#border {
width: 270px;
height: 270px;
position: absolute;
margin: 81px 410px;
background: #000;
-moz-border-radius: 135px;
border-radius: 135px;
-moz-box-shadow: 5px 5px 5px #777 inset, 0px -10px 40px #aaa;
box-shadow: 5px 5px 5px #777 inset, 0px -10px 40px #aaa;
-webkit-box-shadow: 0px -10px 40px #aaa;
}
#glass {
width: 250px;
height: 250px;
position: absolute;
margin: 91px 420px;
background: #0099ff;
-moz-border-radius: 125px;
-webkit-border-radius: 125px;
border-radius: 125px;
-moz-box-shadow:inset 5px 5px 60px #0066cc;
box-shadow:inset 5px 5px 60px #0066cc;
}
[/css]
HTML
[html]
<div id="handle"></div><div id="border"></div><div id="glass"></div>
[/html]
Finalni proizvod:
