Box con effetto ombra con i CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.983)

:: Referenze dei fogli di stile Css (41.753)

:: Menu ad effetto mouseover con i Css (39.088)

:: Effetti sui link con i Css (29.607)

:: Testo verticale coi Css (19.865)

:: Angoli smussati in un box coi Css (18.845)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.134)

:: Stilizzare i form Html con i Css (15.904)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.542)

:: Colorare le barre di scorrimento del browser con i Css (14.252)

IN EVIDENZA
DOWNLOAD