Gradienti lineari CSS3 [Suggerimenti CSS3]
Pendenza è una fantastica aggiunta di colori in CSS3. Anziché aggiungere un solo colore, ora possiamo aggiungere più combinazioni di colori in un unico blocco di dichiarazione senza fare affidamento sulle immagini, il che potrebbe ridurre la richiesta HTTP nel nostro sito Web consentendo il caricamento più rapido del sito Web.
Se hai giocato con i gradienti in CSS3 probabilmente conosci i due metodi: gradiente radiale e lineare. Il post di oggi riguarderà quest'ultimo.
Creare gradienti
Siccome la specifica dice che i gradienti in CSS3 sono un'immagine, non ha una proprietà speciale come un'altra aggiunta di nuove funzionalità, quindi è dichiarata usando il immagine di sfondo proprietà invece.
Se diamo un'occhiata alla sintassi completa per il gradiente, sembra un po ' imbottita, che potrebbe portare a confusione per alcune persone.
div background-image: -webkit-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%);
Quindi analizziamo ciascuna parte della sintassi una per una per rendere le cose più chiare.
Prima di tutto, il gradiente lineare viene dichiarato con lineare-gradiente () funzione. La funzione ha tre valori principali. Il primo valore definisce la posizione di partenza del gradiente. Puoi usare una parola chiave descrittiva, come superiore per iniziare il gradiente che scorre dal superiore;
div background-image: linear-gradient (in alto, # FF5A00, # FFAE00);
Il frammento sopra è la versione ufficiale del W3C per creare sfumature. In realtà è più semplice e abbastanza auto-esplicativo e creerà anche il seguente gradiente.
Puoi anche usare parte inferiore fare il contrario, oppure destra e sinistra.
Possiamo anche creare un gradiente diagonale usando grado angolare come posizione di partenza del gradiente. Ecco un esempio:
div background-image: linear-gradient (45 gradi, # FF5A00, # FFAE00);
Lo snippet sopra riportato creerà il seguente gradiente di colore:
Il secondo valore della funzione dirà il primo colore informazione e il suo ferma la posizione che è indicato in percentuale. La posizione di stop è in realtà opzionale; il browser è abbastanza intelligente da determinare la posizione corretta, quindi quando non specifichiamo la fermata del primo colore che il browser impiegherà 0% come predefinito.
E il prossimo valore è il secondo colore combinazione. Funziona come il valore precedente, solo che se è l'ultimo colore applicato, e non abbiamo specificato il ferma la posizione, un valore di 100% sarà preso come predefinito. Ora, diamo un'occhiata all'esempio qui sotto:
div background-image: linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%);
Il frammento sopra creerà un gradiente simile a quello che abbiamo visto prima (nessuna differenza) ma ora specifichiamo la posizione di stop del colore;
Ora cambiamo il arresto del colore, e questa volta specificheremo 50% per il primo colore e 51% per il secondo colore, e vediamo come si scopre;
div background-image: linear-gradient (in alto, # FF5A00 50%, # FFAE00 51%);
Trasparenza
Creazione trasparenza in gradiente è anche possibile. Per creare l'effetto dobbiamo tradurre il colore esadecimale in RGBA modalità e abbassa il canale alfa.
div background-image: linear-gradient (in alto, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Il frammento sopra abbasserà l'intensità del colore di 20%, e il gradiente si presenterà in questo modo:
Più colori
Se vuoi aggiungere più colori, aggiungi i colori accanto all'altro con un delimitatore di virgola e lascia che il browser determini ogni posizione di arresto del colore.
div background-image: linear-gradient (superiore, rosso, arancione, giallo, verde, blu, indaco, viola);
Lo snippet qui sopra creerà il seguente arcobaleno.
Compatibilità del browser
Sfortunatamente, al momento della stesura di questo documento, tutti i browser correnti devono ancora supportare la sintassi standard. Hanno ancora bisogno del prefisso del venditore (-webkit-, -moz-, -Signorina- e -o-). Ecco perché la sintassi completa appare così:
div background-image: -webkit-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (in alto, # FF5A00 0%, # FFAE00 100%);
D'altra parte, Internet Explorer, in particolare la versione 9 e inferiore, è lontano dallo standard. Il gradiente in IE9 e sotto è dichiarato con filtro, quindi se vogliamo aggiungere gradiente su quei browser, dobbiamo scrivere qualcosa come questo;
div filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
Il filtro ha i suoi limiti: in primo luogo, non consente più di tre colori aggiunti e creare l'effetto trasparenza è anche un po 'complicato - non consente RGBA, ma l'IE filtro usi #ARGB;
div filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Ecco uno strumento per aiutarti a convertire RGBA a #ARGB.
- dimostrazione
- Scarica fonte
Scrivere la sintassi più velocemente
Come puoi vedere sopra, per mantenere la compatibilità con i gradienti tra i browser, dobbiamo aggiungere altre cinque righe di codici che sono inefficienti.
Ci sono molti modi in cui possiamo fare per semplificare il compito; come usare Prefix-free, Prefixr, LESS o Sass per aiutare a compilare i codici, ma soprattutto, consigliamo di usare questo strumento, ColorZilla Gradient. Questo strumento genererà semplicemente tutti i codici necessari affinché i gradienti funzionino in tutti i browser.
Parole finali
Oggi abbiamo discusso parecchio sulla creazione di sfumature, abbiamo esaminato ogni 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.
Ci sono ancora molte cose su cui abbiamo intenzione di esplorare Gradienti CSS3 nei nostri post futuri, quindi rimanete sintonizzati su Hongkiat.com. Infine, grazie per aver letto questo post, ci auguriamo che ti sia piaciuto.
Ulteriori letture
- Sfondi RGBA Bullet Proof Cross Browser - Lea Verou
- Immagine CSS3 - W3.org
- Quando posso usare CSS3 Gradients - CanIUse.com
