Funzione repeating-linear-gradient

La funzione repeating-linear-gradient definisce un gradiente lineare ripetuto. Ciò significa che definiamo un certo motivo di gradiente, ad esempio, da 0px a 10px - gradiente da rosso a blu e questo gradiente sarà ripetuto su tutto il blocco: da 0px a 10px, da 10px a 20px, da 20px a 30px e così via.

Questa funzione viene applicata alle proprietà che definiscono l'immagine di sfondo: background, background-image o l'immagine del bordo: border-image, background-image-source.

Sintassi

selettore {
	background: repeating-linear-gradient([direzione], colore1 dimensione1, colore2 dimensione2...);
}

Valori

Valore	Descrizione
direzione	Definisce una certa direzione del gradiente in qualsiasi unità per angoli o con le parole chiave `top`, `left`, `right`, `bottom` o loro combinazione. L'ordine delle parole non è importante. Il parametro è opzionale: se non specificato, il gradiente andrà dall'alto verso il basso. Prima della direzione si mette la parola `to`.
angolo	Angolo in qualsiasi unità per angoli. Può essere positivo o negativo. Parametro opzionale. Può essere specificato o l'angolo, o la direzione (o niente).
colore1	Colore iniziale del gradiente in qualsiasi unità per colore.
colore2	Colore finale del gradiente in qualsiasi unità per colore.
dimensione	Definisce l'estensione di un determinato colore del gradiente in qualsiasi unità per dimensione.

Esempio . L'opzione più semplice

Il gradiente apparirà così: da 0px a 20px colore rosso puro, da 20px a 40px - gradiente da rosso a blu. E così si ripeterà dall'alto verso il basso (per questo è un gradiente ripetuto):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Esempio . Colori netti

Il gradiente apparirà così: da 0px a 20px colore rosso puro, da 20px a 40px - blu puro (il trucco è che il secondo colore inizia dove finisce il primo). E così si ripeterà dall'alto verso il basso:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Esempio . Cambiamo direzione

Ora la direzione del gradiente sarà da destra a sinistra:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Esempio . Direzione in gradi

Come direzione specifichiamo un angolo in gradi:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Esempio . Valore negativo

Facciamo una direzione con un valore negativo:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Vedi anche

la funzione repeating-radial-gradient,
che crea un gradiente radiale ripetuto
la funzione linear-gradient,
che crea un gradiente lineare
la funzione radial-gradient,
che crea un gradiente radiale