Gradienti CSS
I gradienti CSS ti consentono di visualizzare transizioni fluide tra due o più colori specificati.
CSS definisce tre tipi di gradienti:
- Gradienti lineari (va giù/su/sinistra/destra/diagonalmente)
- Gradienti radiali (definiti dal loro centro)
- Gradienti conici (ruotati attorno a un punto centrale)
Gradienti lineari CSS
Per creare un gradiente lineare è necessario definire almeno due interruzioni di colore. Le interruzioni di colore sono i colori tra i quali si desidera rendere uniformi le transizioni. Puoi anche impostare un punto iniziale e una direzione (o un angolo) insieme all'effetto sfumatura.
Sintassi
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direzione - Dall'alto verso il basso (questo è l'impostazione predefinita)
L'esempio seguente mostra un gradiente lineare che inizia in alto. Inizia in rosso, passando al giallo:
Esempio
#grad {
background-image: linear-gradient(red, yellow);
}
Direzione: da sinistra a destra
L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia in rosso, passando al giallo:
Esempio
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Direzione - Diagonale
È possibile creare una sfumatura in diagonale specificando sia la posizione iniziale orizzontale che quella verticale.
L'esempio seguente mostra un gradiente lineare che inizia in alto a sinistra (e va in basso a destra). Inizia in rosso, passando al giallo:
Esempio
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Usando gli angoli
Se si desidera un maggiore controllo sulla direzione del gradiente, è possibile definire un angolo, invece delle direzioni predefinite (verso il basso, verso l'alto, verso destra, verso sinistra, verso il basso a destra, ecc.). Un valore di 0deg equivale a "to top". Un valore di 90 gradi equivale a "a destra". Un valore di 180 gradi equivale a "fino in fondo".
Sintassi
background-image: linear-gradient(angle, color-stop1, color-stop2);
L'esempio seguente mostra come utilizzare gli angoli su gradienti lineari:
Esempio
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Utilizzo di più interruzioni di colore
L'esempio seguente mostra una sfumatura lineare (dall'alto verso il basso) con più interruzioni di colore:
Esempio
#grad {
background-image: linear-gradient(red, yellow, green);
}
L'esempio seguente mostra come creare un gradiente lineare (da sinistra a destra) con il colore dell'arcobaleno e del testo:
Esempio
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Usando la trasparenza
I gradienti CSS supportano anche la trasparenza, che può essere utilizzata per creare effetti di dissolvenza.
Per aggiungere trasparenza, utilizziamo la funzione rgba() per definire le interruzioni di colore. L'ultimo parametro nella funzione rgba() può essere un valore compreso tra 0 e 1 e definisce la trasparenza del colore: 0 indica la piena trasparenza, 1 indica il colore pieno (nessuna trasparenza).
L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia completamente trasparente, passando al rosso a tutto colore:
Esempio
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Ripetizione di un gradiente lineare
La funzione repeating-linear-gradient() viene utilizzata per ripetere i gradienti lineari:
Esempio
Un gradiente lineare ripetuto:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}