Creare elementi con ombra con i CSS

È possibile creare con il solo ausilio di CSS3 delle ombreggiature negli elementi del nostro sito web per migliorarne ulteriormente la grafica? La risposta è si, ecco un semplice esempio pratico di come applicare un ombra con i CSS:

Questo esempio consente di creare un ombra grigia nella parte bassa/destra dell’elemento. Il codice puo benissimo essere utilizzato anche su altri elementi del layout, come: pulsanti, campi, e molto altro ancora!

Clicca qui per vedere un esempio

Ecco il codice CSS:

.test
{
box-shadow: 3px 3px 3px #999; /* ombra */
-moz-box-shadow: 3px 3px 3px #999; /* ombra vecchie versioni di firefox */
-webkit-box-shadow: 3px 3px 3px #999; /* ombra vecchie versioni di opera/safari */
}

Da notare i prefissi “moz” e “webkit” che servono per visualizzare le ombre anche nella maggior parte dei browser non compatibili con la proprietà box-shadow.

Questa proprietà è già ampiamente supportata da tutti i browser di nuova generazione. Nei vecchi browser, qualora la proprietà non fosse supportata, l’ombra semplicemente non verrebbe visualizzata lasciando inalterato il resto del layout. In alternativa si possono sempre utilizzare delle immagini.

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website