Creare una sfumatura di colore (gradient) con I css
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.
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 */
}