INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

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;
}
Vediamo quindi il codice CSS3 per applicare l'ombra, effetto che avviene grazie al comando box-shadow ed ai suoi "prefissi" per impostare il funzionamento con i vari browser:

#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

IN EVIDENZA

HOT LINKS