INDICE
Un gradiente è un riempimento a colori che si fonde uniformemente da un colore all'altro. I Gradienti sono stati introdotti in CSS3, con le funzioni di gradiente che possono essere utilizzate ovunque, ma sono principalmente utilizzati dalle proprietà background o background-image per creare un effetto di gradiente sullo sfondo.
Gradienti lineari
La funzione linear-gradient() permette una transizione soft da un colore all'altro.
linear-gradient([<angle> | to <side-or-corner>] {, <color stop> [stop position]} (2-∞) )
Nella sua forma più semplice, il gradiente lineare è costituito da due colori con una diffusione dall'alto verso il basso.
See the Pen Gradiente Lineare by Jacopo Kahl (@jkfrontend) on CodePen.
L'angolo del gradiente può essere impostato utilizzando le parole chiave, seguite dalla destinazione dove il gradiente deve terminare: top, right, bottom, left o le combinazioni tra le direzioni.
See the Pen Gradiente Lineare con direzione by Jacopo Kahl (@jkfrontend) on CodePen.
Si possono specificare angolazioni specifiche utilizzando l'unità deg (degree = grado), con 0 deg che corrisponde allo stesso valore di top. L'unità deg ha una direzione di specifica ad orologio (così come per padding e margin), dove sono possibili anche valori negativi.
See the Pen Gradiente Lineare con deg by Jacopo Kahl (@jkfrontend) on CodePen.
linear-gradient(0deg, blue, green); /* top */
linear-gradient(90deg, blue, green); /* right */
linear-gradient(180deg, blue, green); /* bottom */
linear-gradient(-90deg, blue, green); /* left */
È possibile aggiungere ulteriori interruzioni di colore tra l'inizio e la fine dei colori. Qualsiasi interruzione di colore può essere seguita da una posizione di stop specificata sia come valore di percentuale sia come lunghezza.
Se non viene specificata alcuna posizione di interruzione, i colori sono distribuiti uniformemente. Nel caso seguente, il blu è impostato al 45%, invece della sua posizione predefinita del 50%.
See the Pen Gradiente Lineare con percentuale interruzione colore by Jacopo Kahl (@jkfrontend) on CodePen.
La sintassi standard descritta finora è supportata in Chrome 26+, Firefox 16+, Safari 6.1+, Opera 12.1+ e IE 10+. Le sintassi legacy possono essere usate insieme ai prefissi -moz, -webkit e -o per espandere il supporto fino a Firefox 3.6, Chrome 1, Safari 4 e Opera 11.1.
.linear-gradient {background-color: red; /* colore fallback */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, right top, from(red), to(orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background: -webkit-linear-gradient(left, red, orange);
/* Firefox 3.6-15 */
background: -moz-linear-gradient(left, red, orange);
/* Opera 11.1-12.1 */
background: -o-linear-gradient(left, red, orange);
/* Sintassi standard */
background: linear-gradient(to right, red, orange);
}
Gradienti Radiali
Un gradiente radiale transita verso l'esterno partendo da un punto centrale. In CSS questi gradienti sono definiti con la funzione radial-gradient().
radial-gradient([<shape> + <size>] [at <position>] {, <color stop> [stop position]} {2-∞} )
Per creare un gradiente radiale devono essere definite almeno due interruzioni di colore. Il gradiente radiale nell'esempio inizia come rosso al centro e sfuma
nel blu verso l'esterno.
See the Pen Gradiente Lineare con percentuale interruzione colore by Jacopo Kahl (@jkfrontend) on CodePen.
Così come per la funzione linear-gradient(), sono consentite più di due interruzioni di colore, e possono essere dichiarate insieme ai valori di percentuale e lunghezza, indicando in questo modo la posizione di interruzione del colore.
See the Pen Gradiente Radiale con percentuale by Jacopo Kahl (@jkfrontend) on CodePen.
La forma del gradiente radiale può essere ellittica o a cerchio. La forma base è un'ellissi, che permette al gradiente di diffondersi per corrispondere all'altezza e alla larghezza dell'elemento.
Il valore per il cerchio, forza il gradiente ad essere circolare nei confronti della forma dell'elemento.
See the Pen Gradiente Radiale cerchio by Jacopo Kahl (@jkfrontend) on CodePen.
Due valori per la lunghezza dell'ellissi o un singolo valore per il cerchio, possono essere usati per impostare il raggio verticale e orizzontale del gradiente. Per l'ellisse possono essere impostati anche i valori di percentuale relativi alle dimensioni dell'elemento.
See the Pen Gradiente Radiale percentuale by Jacopo Kahl (@jkfrontend) on CodePen.
Se è necessaria una precisione inferiore, è possibile impostare le dimensioni utilizzando le parole chiave predefinite: closest-side, closest-corner, farthest-side, o
farthest-corner. Questi valori specificano se il gradiente è contenuto tra i bordi di un elemento più vicino o più lontano rispetto all'origine.
See the Pen Gradiente Radiale con posizionamento tramite parole chiave by Jacopo Kahl (@jkfrontend) on CodePen.
L'origine di un gradiente radiale è centrata per impostazione predefinita. Questa impostazione può essere cambiata specificando la posizione dell'origine del gradiente con la parola chiave at seguita da una posizione specificata allo stesso modo della posizione background-position. La posizione orizzontale viene specificata per prima, facoltativamente seguita dalla posizione verticale.
La posizione può essere impostata con parole chiave (left, center, right + top, center, e bottom), i valori di lunghezza, i valori di percentuale o una loro combinazione.
See the Pen Gradiente Radiale con posizionamento tramite parole chiave by Jacopo Kahl (@jkfrontend) on CodePen.
Il supporto per la funzione radial-gradient(), avviene come per linear-gradient(), utilizzando i prefissi -moz, -webkit e -o. Come per la funzione linear-gradient(), la sintassi per il gradiente radiale ha subito diverse revisioni nel tempo.
.radial-gradient {
background-color: red; /* colore di fallback */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,red), color-stop(100%,orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background: -webkit-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Firefox 3.6-16 */
background: -moz-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Opera 11.6-12.1 */
background: -o-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Sintasi standard */
background: radial-gradient(ellipse at center, red 0%,
orange 100%);
}
Gradienti Ripetuti
I gradienti lineari e radiali non ammetto dei pattern di ripetizione poiché vengono impostati per coprire la posizione dell'elemento in cui vengono definiti. Possono essere usate due funzione per generare una ripetizione dei gradienti: repeating-linear-gradient() e repeating-radial-gradient().
La funzione repeating-linear-gradient viene utilizzata per gli scopi del gradiente linear-gradient. Mentre repeating-radial-gradient per il gradiente radiale.
Gli argomenti della funzione sono gli stessi di linear-gradient().
repeating-linear-gradient([<angle> | to <side-or-corner>] {, <color stop> [stop position]} (2-∞) )
Una ripetizione lineare del gradiente, ripete all'infinito l'interruzione del colore. La grandezza del gradiente è determinata dall'ultima interruzione di colore. Per evitare transizioni smussate, il colore di partenza può essere ripetuto alla fine.
See the Pen Ripetizione Gradiente lineare by Jacopo Kahl (@jkfrontend) on CodePen.
Anche per la funzione di ripetizione di gradiente radiale viene condivisa la stessa sintassi del gradiente radiale. Rispetto al precedente il gradiente radiale ha delle transizione di colore più sfumate.
See the Pen Ripetizione Gradiente radiale by Jacopo Kahl (@jkfrontend) on CodePen.
Conclusione
La sintassi per la definizione dei gradienti nei CSS è più complessa rispetto alle altre. Per questo motivo possono essere utilizzati degli strumenti online che ci aiutano a definire il gradiente.
Quelli che vi consiglio (e che utilizzo anche io) sono:
