Функция repeating-linear-gradient

Функция repeating-linear-gradient такрорланувчи линей градиентни белгилайди. Бу шунни англатадики, биз градиентнинг маълум нақшини белгилаймиз, масалан, 0px дан 10px гача - қизилдан кўк рангга градиент ва бу градиент бутун блок бўйича такрорланади: 0px дан 10px гача, 10px дан 20px гача, 20px дан 30px гача ва ҳоказо.

Бу функция орқа фон расмини белгиловчи хоссаларга қўлланилади: background, background-image ёки чегара расми: border-image, background-image-source.

Синтаксис

селектор {
	background: repeating-linear-gradient([йўналиш], ранг1 ўлчам1, ранг2 ўлчам2...);
}

Қийматлар

Қиймат	Тасниф
йўналиш	Градиентнинг маълум йўналишини исталган бурчак ўлчов бирликларида ёки калит сўзлар билан белгилайди `top`, `left`, `right`, `bottom` ёки уларнинг комбинацияси. Сўзларнинг тартиби аҳамиятсиз. Параметр мажбурий эмас: агар уни ёзмасангиз, градиент юқоридан пастга караб йўналади. Йўналишдан олдин `to` сўзи қўйилади.
бурчак	Исталган бурчак ўлчов бирликларидаги бурчак. Мусбат ёки манфий бўлиши мумкин. Параметр мажбурий эмас. Бир вактнинг ўзида бурчак ёки йўналиш (ёки умуман ҳеч нарса) белгиланиши мумкин.
ранг1	Градиентнинг бошланғич рангни исталган ранг ўлчов бирликларида.
ранг2	Градиентнинг тугаш рангни исталган ранг ўлчов бирликларида.
ўлчам	Градиентнинг маълум рангнинг чўзиқлигини исталган ўлчам ўлчов бирликларида белгилайди.

Мисол . Энг содда вариант

Градиент шундай кўринади: 0px дан 20px гача тоза қизил ранг, 20px дан 40px гача - қизилдан кўк рангга градиент. Ва шу юқоридан пастга караб такрорланади (бу такрорланувчи градиент учун):

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

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

Мисол . Аниқ ранглар

Градиент шундай кўринади: 0px дан 20px гача тоза қизил ранг, 20px дан 40px гача - тоза кўк ранг (фишка шундаки, иккинчи ранг биринчи ранг тугаган жойда бошланади). Ва шу юқоридан пастга караб такрорланади:

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

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

Мисол . Йўналишни ўзгартирамиз

Ҳозир градиентнинг йўнали ўнгдан чапга караб бўлади:

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

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

Мисол . Йўналиш градусларда

Йўналиш сифатида градуслардаги бурчакни белгилаймиз:

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

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

Мисол . Манфий қиймат

Йўналишни манфий қиймат билан қиламиз:

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

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

Қуйидагиларни ҳам кўринг

repeating-radial-gradient функцияси,
у такрорланувчи радиал градиент яратади
linear-gradient функцияси,
у линей градиент яратади
radial-gradient функцияси,
у радиал градиент яратади