Box con effetto ombra con i CSS3

Design di siti Web con HTML e CSS Disegno di siti Web con HTML, CSS e Dynamic HTML.

Grazie ai CSS3 è possibile creare box ad effetto ombra via codice, attraverso pochi e semplici comandi. Di contro, l'effetto funziona solo con browser diversi da Internet Explorer che, fino alla versione 8 (poi chissà...) non supporta in pieno i CSS3.

Ecco un esempio:

Vediamo il codice, iniziando dall'HTML:

<div id="box">Box con ombra by lukeonweb.net</div>

Si tratta di un semplice elemento di testo (che stilizzeremo di base come segue) a cui viene assegnato un ID:

div
{
    background: #EEEEEE;
    color: #000000;
    font: normal 13px verdana;
    width: 300px;
    height: 250px;
    padding: 10px 10px 10px 10px;
    border: solid 1px #AAAAAA;
}

#box
{
    -webkit-box-shadow: 10px 10px 5px #DDDDDD;
    -moz-box-shadow: 10px 10px 5px #DDDDDD;
    box-shadow: 10px 10px 5px #DDDDDD;
}

L'elenco dei valori è il seguente:

spaziatura orizzontale / spaziatura verticale / intensità / colore

In questo modo abbiamo impostato l'ombra esterna, ma possiamo impostare anche quella interna:

#box
{
    -webkit-box-shadow: inset 10px 10px 5px #DDDDDD;
    -moz-box-shadow: inset 10px 10px 5px #DDDDDD;
    box-shadow: inset 10px 10px 5px #DDDDDD;
}

Come vediamo, come primo valore abbiamo specificato il valore inset che per default (se non specificato) è outset.

TAGS - box effetto ombra, box shadow, css3