Una guida ai gradienti lineari CSS3
La sfumatura è una grande aggiunta di funzionalità di colore in CSS3. Invece di aggiungere solo un singolo colore, ora possiamo aggiungere più combinazioni di colori in un blocco di dichiarazione senza fare affidamento sulle immagini, il che potrebbe ridurre la richiesta HTTP nel nostro sito Web consentendo il caricamento più veloce del sito Web.
Se hai giocato con gradienti in CSS3 probabilmente hai familiarità con i due metodi: gradiente radiale e lineare. Il post di oggi riguarderà quest’ultimo.
Creazione di gradienti
Dato che la specifica dice che i gradienti in CSS3 è un’immagine , non ha proprietà speciali come altre aggiunte di nuove funzionalità, quindi viene invece dichiarata usando la proprietà background-image.
Se diamo un’occhiata alla sintassi completa per il gradiente, sembra un po ‘troppo imbottito , il che potrebbe creare confusione per alcune persone.
|
1
2
3
4
5
6
7
|
div { background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);} |
Quindi scaviamo in ciascuna parte della sintassi una per una per rendere le cose più chiare.
Prima di tutto, il gradiente lineare viene dichiarato con la funzione linear-gradient(). La funzione ha tre valori primari. Il primo valore definisce la posizione iniziale del gradiente. È possibile utilizzare una parola chiave descrittiva, ad esempio topper iniziare il gradiente che scorre dall’alto ;
|
1
2
3
|
div { background-image: linear-gradient(top, #FF5A00, #FFAE00); } |
Lo snippet sopra è la versione ufficiale del W3C per creare sfumature. In realtà è più semplice e abbastanza autoesplicativo e creerà anche il seguente gradiente.
Puoi anche usare il contrario bottom, altrimenti righte left.
Possiamo anche creare un gradiente diagonale usando come posizione iniziale del gradiente angle degree. Ecco un esempio:
|
1
2
3
|
div { background-image: linear-gradient(45deg, #FF5A00, #FFAE00);} |
Lo snippet sopra crea il seguente gradiente di colore:
Il secondo valore della funzione indicherà le prime informazioni sul colore e la sua posizione di arresto che è indicata in percentuale. La posizione di arresto in realtà è opzionale; il browser è abbastanza intelligente da determinare la posizione corretta, quindi quando non specifichiamo la fine del primo colore il browser assumerà 0%come predefinito.
E il valore successivo è la seconda combinazione di colori . Funziona come il valore precedente, solo che se è l’ultimo colore applicato e non abbiamo specificato la posizione di arresto , verrà preso come valore predefinito un valore di 100%. Ora diamo un’occhiata all’esempio seguente:
|
1
2
3
|
div { background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);} |
Lo snippet sopra creerà un gradiente simile a quello che abbiamo visto prima (nessuna differenza) ma ora specifichiamo la posizione di arresto del colore;
Ora cambiamo il colore stop, e questa volta specificheremo 50%per il primo colore e 51%per il secondo colore, e vediamo come si presenta;
|
1
2
3
|
div { background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);} |
Trasparenza
Con la funzione transparency è possibil la creazione in gradiente. Per creare l’effetto dobbiamo tradurre la modalità del colorehexin rgba e abbassare il canale alfa.
|
1
2
3
|
div { background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));} |
Lo snippet sopra ridurrà l’intensità del colore di 20%e il gradiente risulterà così:
Colori multipli
Se desideri aggiungere più colori, aggiungi i colori uno accanto all’altro con un delimitatore virgola e lascia che il browser determini la posizione di arresto di ciascun colore.
|
1
2
3
|
div { background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);} |
Lo snippet sopra creerà il seguente arcobaleno.
Compatibilità del browser
Hanno ancora bisogno del prefisso fornitore ( -webkit-, -moz-, -ms-e -o-). Quindi, ecco perché la sintassi completa appare così:
|
1
2
3
4
5
6
7
|
div { background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);} |
D’altra parte, Internet Explorer , in particolare la versione 9 e precedenti, è tutt’altro che standard. Il gradiente in IE9 e sotto è dichiarato con filter, quindi se vogliamo aggiungere un gradiente su quei browser, dobbiamo scrivere qualcosa del genere;
|
1
2
3
|
div { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);} |
filterha i suoi limiti: in primo luogo non consente più di tre colori aggiunti, e creando l’effetto di trasparenza è anche un pò complicato non permette rgba, ma l’IE filterutilizza #ARGB;
|
1
2
3
|
div { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);} |
Scrivere la sintassi più velocemente
Come puoi vedere sopra, al fine di mantenere la compatibilità con il gradiente tra i browser , dobbiamo aggiungere altre cinque righe di codice che sono inefficienti .
Ci sono molti modi in cui possiamo fare per semplificare l’attività; come utilizzare Prefix-free, Prefixr, LESS o Sass per aiutare a compilare i codici, ma soprattutto, consigliamo di utilizzare questo strumento, ColorZilla Gradient. Questo strumento genererà semplicemente tutti i codici necessari per il funzionamento dei gradienti in tutti i browser.
Conclusione
Abbiamo discusso parecchio sulla creazione di gradienti, abbiamo esaminato ciascuna parte della sintassi, creando effetti trasparenti e mantenendo la compatibilità del browser. Quindi, a questo punto, speriamo che tu abbia già una migliore comprensione in materia .
