CSS3 box shadow

giZ — Wed, 18 Nov 2009 08:43:28 +0000

Le novità introdotte dalle specifiche CSS3 in continuo sviluppo e accompagnate dai Browsers più noti come Safari e Firefox, sono sempre più interessanti; certo non le cito tutto perchè basta cercare CSS3 in Google o andare su css3.info per trovare tutte le regole.
In particolare mi dedico agli effetti dei quali ho sempre sentito la mancanza per implementarli nei mie layout web, come la possibilità di creare un’ombra ad un div.

Vediamo il codice per l’Ombra di un Box:

box-shadow: 0px 0px 5px #ccc; (Standard)
-moz-box-shadow: 0px 0px 5px #ccc; (Firefox)
-webkit-box-shadow: 0px 0px 5px #ccc; (Safari)

Ora creo un box con angoli tondi e ombreggiatura:

#MyID {
position:absolute;
width: 120px;
height: 120px;
border: 1px solid #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 5px #ccc;
-moz-box-shadow: 0px 0px 5px #ccc;
-webkit-box-shadow: 0px 0px 5px #ccc;
}

Presto analizzerò altre capacità CSS3.

gizstyle.com // grafica nell'animo » box-shadow

CSS3 box shadow