Funkcija repeating-linear-gradient

Funkcija repeating-linear-gradient definiše ponavljajući linearni gradient. Ovo znači da definišemo određeni uzorak gradienta, na primer, od 0px do 10px - gradient od crvene do plave boje i ovaj gradient će se ponavljati na celom bloku: od 0px do 10px, od 10px do 20px, od 20px do 30px i tako dalje.

Ova funkcija se primenjuje na svojstva koja definišu pozadinsku sliku: background, background-image ili sliku okvira: border-image, background-image-source.

Sintaksa

selektor {
	background: repeating-linear-gradient([smer], boja1 veličina1, boja2 veličina2...);
}

Vrednosti

Vrednost	Opis
smer	Određuje određeni smer gradienta u bilo kojim jedinicama za uglove ili ključnim rečima `top`, `left`, `right`, `bottom` ili njihovom kombinacijom. Redosled reči nije bitan. Parametar je opcioni: ako se ne napiše, gradient će ići odozgo nadole. Ispred smera se stavlja reč `to`.
ugao	Ugao u bilo kojim jedinicama za uglove. Može biti pozitivan ili negativan. Parametar je opcioni. Istovremeno može biti definisan ili ugao, ili smer (ili ništa).
boja1	Početna boja gradienta u bilo kojim jedinicama za boju.
boja2	Krajnja boja gradienta u bilo kojim jedinicama za boju.
veličina	Određuje dužinu određene boje gradienta u bilo kojim jedinicama za veličinu.

Primer . Najjednostavnija varijanta

Gradient će izgledati ovako: od 0px do 20px čista crvena boja, od 20px do 40px - gradient od crvene do plave boje. I tako će se ponavljati odozgo nadole (za to je i ponavljajući gradient):

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

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

Primer . Čvrste boje

Gradient će izgledati ovako: od 0px do 20px čista crvena boja, od 20px do 40px - čista plava boja (trik je u tome što druga boja počinje tamo gde se završava prva). I tako će se ponavljati odozgo nadole:

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

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

Primer . Promena smera

Sada će smer gradienta biti s desna na levo:

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

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

Primer . Smer u stepenima

Kao smer definisaćemo ugao u stepenima:

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

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

Primer . Negativna vrednost

Učinićemo smer negativnom vrednošću:

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

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

Pogledajte takođe

funkciju repeating-radial-gradient,
koja kreira ponavljajući radijalni gradient
funkciju linear-gradient,
koja kreira linearni gradient
funkciju radial-gradient,
koja kreira radijalni gradient