Creazione di gradienti lineari cross-browser con CSS3

01 di 04

Creazione di gradienti lineari cross-browser con CSS3

Gradienti lineari

Il tipo più comune di gradiente che vedrai è un gradiente lineare di due colori. Ciò significa che il gradiente si muoverà in linea retta cambiando gradualmente dal primo al secondo lungo quella linea. L'immagine in questa pagina mostra una semplice sfumatura da sinistra a destra di # 999 (grigio scuro) a #fff (bianco).

I gradienti lineari sono i più facili da definire e hanno il maggior supporto nei browser. I gradienti lineari CSS3 sono supportati in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ e Safari 4+. Internet Explorer può aggiungere sfumature usando a filtro e li supporta di nuovo a IE 5.5. Questo non è CSS3, ma è un'opzione per la compatibilità cross-browser.

Quando definisci una sfumatura devi definire diverse cose:

Che tipo di gradiente è-lineare o radiale
Dove dovrebbe iniziare la sfumatura
Dove il gradiente dovrebbe fermarsi
Quali colori sono nel gradiente e dove dovrebbero iniziare e fermarsi

Per definire i gradienti lineari usando CSS3, scrivi:

lineare-gradiente (angolo o lato o angolo, arresto del colore, arresto del colore)

Per prima cosa definisci il tipo di sfumatura con il nome lineare -pendenza.

Quindi, si definiscono i punti di inizio e fine del gradiente in due modi: il angolo della linea in gradi da 0 a 359, con 0 gradi verso l'alto. O con la funzione "lato o angolo", come sinistra, destra, parte inferiore, e superiore. Questi saranno spiegati in maggior dettaglio nella prossima pagina. Se li lasci fuori, il gradiente scorrerà dall'alto verso il basso dell'elemento.

Quindi definisci i fermi colore. Si definisce il colore si ferma con il codice colore e una percentuale opzionale. La percentuale indica al browser dove sulla linea di iniziare o terminare con quel colore. L'impostazione predefinita è posizionare i colori uniformemente lungo la linea. Imparerai di più sulle interruzioni di colore a pagina 3.

Quindi, per definire il gradiente sopra con CSS3, scrivi:
gradiente lineare (a sinistra, # 999999 0%, #ffffff 100%);
E impostarlo come sfondo di a DIV Scrivi:
div {background-image: linear-gradient (sinistra, # 999999 0%, #ffffff 100%;}
Estensioni del browser per gradienti lineari CSS3

Per far funzionare il tuo gradiente per il cross-browser, devi utilizzare le estensioni del browser per la maggior parte dei browser e a filtro per Internet Explorer 9 e versioni precedenti (in realtà 2 filtri). Tutti questi elementi prendono gli stessi elementi per definire il tuo gradiente (tranne che puoi definire solo sfumature a 2 colori in IE).

Filtri Microsoft ed estensione-Internet Explorer è il più difficile da supportare, perché hai bisogno di tre diverse linee per supportare le diverse versioni del browser. Per ottenere il gradiente da grigio a bianco sopra scrivi:
/ * IE 5.5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);
Estensione Mozilla-Il -moz- l'estensione funziona come la proprietà CSS3, solo con -moz- estensione. Per ottenere il gradiente di cui sopra per Firefox, scrivi:
-moz-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);
Opera Extension-Il -o- l'estensione aggiunge sfumature a Opera 11.1+. Per ottenere il gradiente di cui sopra, scrivi:
-o-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);
Estensione Webkit-Il -webkit- l'estensione funziona molto come la proprietà CSS3. Per definire il gradiente sopra per Safari 5.1+ o Chrome 10+ scrivi:
-webkit-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);
C'è anche una versione precedente dell'estensione Webkit che funziona con Chrome 2+ e Safari 4+. In esso definisci il tipo di gradiente come valore, piuttosto che nel nome della proprietà. Per ottenere il gradiente da grigio a bianco con questa estensione, scrivi:
-webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (0%, # 999999), color-stop (100%, # ffffff));
Codice CSS gradiente lineare completo CSS3

Per il pieno supporto cross-browser per ottenere il gradiente da grigio a bianco sopra devi prima includere un colore di sicurezza di riserva per i browser che non supportano le sfumature e l'ultimo elemento dovrebbe essere lo stile CSS3 per i browser pienamente compatibili. Quindi scrivi:
sfondo: # 999999;background: -moz-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);background: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (0%, # 999999), color-stop (100%, # ffffff));background: -webkit-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);background: -o-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);background: -ms-linear-gradient (a sinistra, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);sfondo: gradiente lineare (a sinistra, # 999999 0%, #ffffff 100%);
Le prossime pagine di questo tutorial spiegano in dettaglio le parti di una sfumatura e l'ultima pagina punta a uno strumento che è un ottimo modo per creare automaticamente gradienti CSS3.

Guarda questo gradiente lineare in azione usando solo CSS.
02 di 04
Creazione di gradienti diagonali: l'angolo del gradiente

I punti di inizio e fine determinano l'angolo del gradiente. La maggior parte dei gradienti lineari vanno dall'alto verso il basso o da sinistra a destra. Ma è possibile costruire un gradiente che si muova su una linea diagonale. L'immagine in questa pagina mostra un gradiente semplice che si muove in un angolo di 45 gradi attraverso l'immagine da destra a sinistra.

Angoli per definire la linea del gradiente

L'angolo è una linea su un cerchio immaginario al centro dell'elemento. 0deg indica, 90deg indica a destra, 180deg punta in basso, e 270deg punta a sinistra. Puoi definire qualsiasi angolazione da 0 a 359 gradi.

Dovresti notare che in un quadrato, un angolo di 45 gradi si sposta dall'angolo in alto a sinistra a quello in basso a destra, ma in un rettangolo i punti di inizio e fine sono leggermente al di fuori della forma, come puoi vedere nell'immagine.

Il modo più comune per definire un gradiente diagonale è definire un angolo, ad esempio in alto a destra e il gradiente si sposterà da quell'angolo all'angolo opposto. È possibile definire la posizione di partenza con le seguenti parole chiave:

superiore

destra

parte inferiore

sinistra

centro

E possono essere combinati per essere più specifici, come ad esempio:

in alto a destra

in alto a sinistra

in alto al centro

in basso a destra

in basso a sinistra

centro in basso

centro giusto

centro sinistro

Ecco il CSS per un gradiente simile a quello raffigurato, dal rosso al bianco che si sposta dall'angolo in alto a destra a quello in basso a sinistra:
background: ## 901A1C;background-image: -moz-linear-gradient (in alto a destra, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (lineare, in alto a destra, in basso a sinistra, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));background: -webkit-linear-gradient (in alto a destra, # 901A1C 0%, #ffffff 100%);background: -o-linear-gradient (in alto a destra, # 901A1C 0%, #ffffff 100%);background: -ms-linear-gradient (in alto a destra, # 901A1C 0%, #ffffff 100%);sfondo: gradiente lineare (in alto a destra, # 901A1C 0%, #ffffff 100%);
Potresti aver notato che non ci sono filtri IE in questo esempio. Questo perché IE consente solo due tipi di filtri: dall'alto al basso (il predefinito) e da sinistra a destra (con il GradientType = 1 interruttore).

Guarda questo gradiente lineare diagonale in azione usando solo CSS.
03 di 04
Soste di colore

Con i gradienti lineari CSS3, puoi aggiungere più colori al tuo gradiente per creare effetti ancora più elaborati. Per aggiungere questi colori, aggiungi ulteriori colori alla fine della tua proprietà, separati da virgole. Dovresti includere dove sulla linea dovrebbero iniziare o finire i colori.

I filtri di Internet Explorer supportano solo due interruzioni di colore, quindi quando si crea questa sfumatura, è necessario includere solo il primo e il secondo colore che si desidera visualizzare.

Ecco il CSS per il gradiente a 3 colori sopra:
sfondo: #ffffff;background: -moz-linear-gradient (a sinistra, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));background: -webkit-linear-gradient (a sinistra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);sfondo: -o-linear-gradient (a sinistra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);sfondo: -ms-linear-gradient (a sinistra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);sfondo: gradiente lineare (a sinistra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Guarda questo gradiente lineare con tre stop di colore in azione usando solo CSS.
04 di 04
Rendi le pendenze degli edifici più facili

Ci sono due siti che consiglio di aiutarti a costruire gradienti, ognuno con vantaggi e svantaggi, non ho trovato un generatore di gradienti che faccia ancora tutto.

Ultimate CSS Gradient GeneratorQuesto generatore di gradiente è molto popolare perché si comporta in modo simile ai builder di gradienti in programmi come Photoshop. Mi piace anche perché ti dà tutte le estensioni CSS, non solo Webkit e Mozilla. Il problema con questo generatore è che supporta solo gradienti orizzontali e verticali. Se vuoi fare gradienti diagonali, devi andare all'altro generatore che consiglio.
CSS3 Gradient GeneratorQuesto generatore mi ha messo un po 'più a capire del primo, ma supporta la modifica della direzione in diagonale.
Se sei a conoscenza di un altro generatore di gradiente CSS che ti piace meglio di questi, faccelo sapere.