Creare una sfumatura gradient con i CSS

Questo breve tutorial spiega come impostare in un elemento qualsiasi del proprio sito web uno sfondo sfumato verticalmente, senza l’ausilio di immagini ma utilizzando unicamente i CSS! La tecnica è abbastanza semplice e soprattutto comoda! Ecco come fare:

Questo esempio consente di impostare uno sfondo con sfumatura gradient su un elemento <div> sfruttando la potenza di CSS3, ed è compatibile, grazie al webkit, con tutti i browser di nuova generazione.

Clicca qui per vedere un esempio

Ecco il codice CSS:

.test {
background-color: #b8b8b8; /* non CSS3 browsers */
background: linear-gradient(#f7f7f7, #b8b8b8); /* Sfumatura */
background: -webkit-linear-gradient(#f7f7f7, #b8b8b8); /* Sfumatura Safari */
background: -o-linear-gradient(#f7f7f7, #b8b8b8); /* Sfumatura Opera */
background: -moz-linear-gradient(#f7f7f7, #b8b8b8); /* Sfumatura Firefox */
}

Questo esempio in particolare consente di creare una sfumatura verticale, dall’alto al basso. Il codice è molto facile ed intuitivo, basta guardare i commenti sulla destra per capire su quale browser ha effetto la sfumatura.

Alternativa
Ci sono anche diversi altri tipi di sfumature che si possono creare, ad esempio: diagonale, radiale, con più colori. Questo è il codice per creare una sfumatura orizzontale, da sinistra a destra:

.test {
background-color: #b8b8b8; /* non CSS3 browsers */
background: linear-gradient(to right, #f7f7f7, #b8b8b8); /* Sfumatura */
background: -webkit-linear-gradient(left, #f7f7f7, #b8b8b8); /* Sfumatura Safari */
background: -o-linear-gradient(right, #f7f7f7, #b8b8b8); /* Sfumatura Opera */
background: -moz-linear-gradient(right, #f7f7f7, #b8b8b8); /* Sfumatura Firefox */
}

Essendo cross-browser questa proprietà è supportata da tutti i più popolari browser di nuova generazione, ma è possibile che alcuni vecchi browser non la supportino, per risolvere basta mettere un colore di sfondo predefinito a tinta unita oppure utilizzare le 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