Funzione linear-gradient
La funzione linear-gradient definisce un gradiente
lineare. Si applica alle proprietà che
definiscono un'immagine di sfondo: background,
background-image
o un'immagine del bordo: border-image,
background-image-source.
Sintassi
selettore {
background: linear-gradient([angolo o direzione], colore1 dimensione1, colore2 dimensione2...);
}
Valori
| Valore | Descrizione |
|---|---|
| direzione |
Definisce una direzione specifica del gradiente in qualsiasi unità di misura per angoli
o tramite parole chiave top, left, right, bottom
o loro combinazione: top left, top right e così via.
L'ordine delle parole non è importante: si può scrivere top left e left top,
non c'è differenza. Il parametro è opzionale: se non specificato, il gradiente andrà
dall'alto verso il basso (come con to top). Prima della direzione si mette la parola to.
|
| angolo | Angolo in qualsiasi unità di misura per angoli. Può essere positivo o negativo. Parametro opzionale. Può essere specificato o un angolo, o una direzione (o niente). |
| colore1 | Colore iniziale del gradiente in qualsiasi unità di misura per colori. |
| colore2 | Colore finale del gradiente in qualsiasi unità di misura per colori. |
| dimensione | Definisce l'estensione di un determinato colore del gradiente in qualsiasi unità di misura per dimensioni. |
Esempio . L'opzione più semplice
Sintassi:
selettore {
background: linear-gradient(colore iniziale, colore finale);
}
Vediamo un esempio:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo un angolo
Sintassi:
selettore {
background: linear-gradient(angolo, colore iniziale, colore finale);
}
Vediamo un esempio:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo una direzione
Invece dell'angolo si può aggiungere una direzione
top, left, right, bottom
o loro combinazione: top left, top right
Prima della direzione si mette la parola to.
Sintassi:
selettore {
background: linear-gradient(direzione, colore iniziale, colore finale);
}
Vediamo un esempio:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo una direzione
Specifichiamo un'altra direzione:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo una dimensione
Sintassi:
selettore {
background: linear-gradient(colore1 dimensione1, colore2 dimensione2);
}
Nel prossimo esempio il comportamento sarà il seguente:
colore rosso puro da 0px a
30px, da 30px a 50px
ci sarà un gradiente dal rosso al blu, e
da 50px fino alla fine - blu puro:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo più di 2 colori
Sintassi:
selettore {
background: linear-gradient(colore1 dimensione1, colore2 dimensione2, colore3 dimensione3...);
}
Nel prossimo esempio il comportamento sarà il seguente:
colore rosso puro da 0px a
30px, da 30px a 50px
ci sarà un gradiente dal rosso al blu, e
da 50px a 70px - un gradiente dal blu
al verde, e dopo 70px - verde puro:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Esempio . Transizioni nette
Nel prossimo esempio il comportamento sarà il seguente:
colore rosso puro da 0px a
30px, blu puro - da 30px
a 60px, verde puro - dopo 60px
(red 0px si può anche non scrivere):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Esempio . Le dimensioni si possono specificare anche in percentuali
Nel prossimo esempio il comportamento sarà il seguente:
colore rosso puro da 0% a
30%, blu puro - da 30%
a 60%, verde puro - dopo 60%
(red 0% si può anche non scrivere):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Esempio . Combinazione con background-size
Nel prossimo esempio il comportamento sarà il seguente:
colore rosso puro da 0px a
30px, blu puro - da 30px
a 60px, e tutto questo si ripeterà
a pezzetti di 60px (a causa di background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Vedi anche
-
la funzione
radial-gradient,
che crea un gradiente radiale -
la funzione
repeating-linear-gradient,
che crea un gradiente lineare ripetuto -
la funzione
repeating-radial-gradient,
che crea un gradiente radiale ripetuto
