Funcția repeating-linear-gradient

Funcția repeating-linear-gradient definește un gradient liniar repetat. Aceasta înseamnă că definim un anumit model de gradient, de exemplu, de la 0px până la 10px - gradient de la roșu la albastru deschis și acest gradient se va repeta pe întregul bloc: 0px până la 10px, de la 10px până la 20px, de la 20px până la 30px și așa mai departe.

Această funcție se aplică la proprietățile care definesc o imagine de fundal: background, background-image sau o imagine a bordurii: border-image, background-image-source.

Sintaxă

selector {
	background: repeating-linear-gradient([direcție], culoare1 dimensiune1, culoare2 dimensiune2...);
}

Valori

Valoare	Descriere
direcție	Definește o anumită direcție a gradientului în orice unitate pentru unghiuri sau prin cuvinte cheie `top`, `left`, `right`, `bottom` sau combinații ale acestora. Ordinea cuvintelor nu este importantă. Parametrul este opțional: dacă nu este specificat, gradientul va fi de sus în jos. Înaintea direcției se plasează cuvântul `to`.
unghi	Unghi în orice unitate pentru unghiuri. Poate fi pozitiv sau negativ. Parametru opțional. Poate fi specificat fie unghiul, fie direcția (sau nimic).
culoare1	Culoarea de început a gradientului în orice unitate pentru culoare.
culoare2	Culoarea de sfârșit a gradientului în orice unitate pentru culoare.
dimensiune	Definește întinderea unei anumite culori a gradientului în orice unitate pentru dimensiune.

Exemplu . Cea mai simplă variantă

Gradientul va arăta astfel: de la 0px până la 20px culoare roșie pură, de la 20px până la 40px - gradient de la roșu la albastru deschis. Și acest model se va repeta de sus în jos (pentru asta este gradientul repetat):

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

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

Exemplu . Culori clare

Gradientul va arăta astfel: de la 0px până la 20px culoare roșie pură, de la 20px până la 40px - albastru deschis pur (particularitatea este că a doua culoare începe acolo unde se termină prima). Și acest model se va repeta de sus în jos:

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

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

Exemplu . Schimbăm direcția

Acum direcția gradientului va fi de la dreapta la stânga:

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

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

Exemplu . Direcție în grade

Ca direcție vom specifica un unghi în grade:

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

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

Exemplu . Valoare negativă

Să facem direcția cu o valoare negativă:

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

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

Vedeți și

funcția repeating-radial-gradient,
care creează un gradient radial repetat
funcția linear-gradient,
care creează un gradient liniar
funcția radial-gradient,
care creează un gradient radial