CHIAMA SUBITO
0731 214634
 
 
 
 
 
 
 
Knowledge base
Knowledge base
Knowledge base
 
Programmazione - CSS
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 */
}

 

 

TEST

 

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 */
}

 

 

TEST

 

 

COMPUTER PLUS srl
Viale della Vittoria 8/a
60035 JESI (AN)
Tel. 0731 214634
Fax 0731 221903
info@computerplus.it
info@pec.computerplus.it
Chi Siamo
Dove Siamo
Lo Staff
Contatti
Richiesta assistenza
Supporto
 
Effettua i tuoi pagamenti online!
È facile e veloce!
 
Inoltre puoi utilizzare anche il nostro POS virtuale per pagare anticipi o fatture ⇨ pos.computerplus.it
© Copyright 2015 Computer Plus srl | P.Iva IT01538200427 | Termini e Condizioni> | Politica sulla privacy | Informativa sui cookies