Funkcia repeating-linear-gradient

Funkcia repeating-linear-gradient nastavuje opakujúci sa lineárny gradient. To znamená, že nastavíme určitý vzor gradientu, napr. od 0px do 10px - gradient od červenej k modrej a tento gradient sa bude opakovať na celý blok: 0px do 10px, od 10px do 20px, od 20px do 30px a tak ďalej.

Táto funkcia sa aplikuje na vlastnosti, ktoré nastavujú obrázok pozadia: background, background-image alebo obrázok okraja: border-image, background-image-source.

Syntax

selektor {
	background: repeating-linear-gradient([smer], farba1 veľkosť1, farba2 veľkosť2...);
}

Hodnoty

Hodnota	Popis
smer	Nastavuje určitý smer gradientu v ľubovoľných jednotkách pre uhly alebo kľúčovými slovami `top`, `left`, `right`, `bottom` alebo ich kombináciou. Poradie slov nie je dôležité. Parameter je voliteľný: ak sa nenapíše, gradient pôjde zhora nadol. Pred smerom sa uvádza slovo `to`.
uhol	Uhol v ľubovoľných jednotkách pre uhly. Môže byť kladný alebo záporný. Parameter je voliteľný. Naraz môže byť zadaný buď uhol, alebo smer (alebo vôbec nič).
farba1	Začiatočná farba gradientu v ľubovoľných jednotkách pre farbu.
farba2	Konečná farba gradientu v ľubovoľných jednotkách pre farbu.
veľkosť	Nastavuje rozsah určitej farby gradientu v ľubovoľných jednotkách pre veľkosť.

Príklad . Najjednoduchšia varianta

Gradient bude vyzerať takto: od 0px do 20px čistá červená farba, od 20px do 40px - gradient od červenej k modrej. A tak sa bude opakovať zhora nadol (na to je opakujúci sa gradient):

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

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

Príklad . Ostré farby

Gradient bude vyzerať takto: od 0px do 20px čistá červená farba, od 20px do 40px - čistá modrá (vychytávka je v tom, že druhá farba začína tam, kde končí prvá). A tak sa bude opakovať zhora nadol:

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

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

Príklad . Zmeníme smer

Teraz bude smer gradientu sprava doľava:

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

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

Príklad . Smer v stupňoch

Ako smer nastavíme uhol v stupňoch:

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

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

Príklad . Záporná hodnota

Nastavme smer zápornou hodnotou:

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

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

Pozri tiež

funkciu repeating-radial-gradient,
ktorá vytvára opakujúci sa radiálny gradient
funkciu linear-gradient,
ktorá vytvára lineárny gradient
funkciu radial-gradient,
ktorá vytvára radiálny gradient