CSS3. Box Shadow.

Iata ca a venit rindul urmatorului truc pe care vreau sa-l descriu si anume umbra la diferite blocuri sau imagin etc. Este foarte des intilnit pe site-uri iluzia de umbra la anumite componente, de cele mai multe ori machetatorii creaza aceasta iluzie cu ajutorul imaginilor taiate din design, CSS3 permite crearea acestui lucru prin intermediul proprietatii box-shadow. In urmatorul exemplu o sa demonstrez cum se poate de aplicat aceasta proprietate.
Iata ce se doreste ca rezultat final:
















Codul HTML
<img src="images/1raul.jpg" id="css3"/>


Codul CSS
#css3{
    -webkit-box-shadow: 3px 3px 6px #666;
    -moz-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
    padding:4px;
    border:solid 1px #a9a9a9;
}
Iata cum se poate de adaugat efectul de umbra prin intermediul CSS3. De mentionat, NU lucreaza la moment pentru IE 6, IE 7...

Niciun comentariu:

Trimiteți un comentariu