Функция linear-gradient

Функция linear-gradient линей градиентни белгилайди. Фон расмни белгилайдиган хусусиятларга қўлланилади: background, background-image ёки чегара расмига: border-image, background-image-source.

Синтаксис

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

Қийматлар

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

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

Синтаксис:

селектор {
	background: linear-gradient(бошланғич ранг, тугаш ранги);
}

Мисолда кўрамиз:

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

#elem {
	background: linear-gradient(black, red);
	width: 200px;
	height: 200px;
}

Мисол . Бурчак қўшамиз

Синтаксис:

селектор {
	background: linear-gradient(бурчак, бошланғич ранг, тугаш ранги);
}

Мисолда кўрамиз:

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

#elem {
	background: linear-gradient(45deg, black, red);
	width: 200px;
	height: 200px;
}

Мисол . Йўналиш қўшамиз

Бурчак ўрнига йўналиш қўшиш мумкин top, left, right, bottom ёки уларнинг бирикмаси: top left, top right Йўналишдан олдин to сўзи қўйилади.

Синтаксис:

селектор {
	background: linear-gradient(йўналиш, бошланғич ранг, тугаш ранги);
}

Мисолда кўрамиз:

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

#elem {
	background: linear-gradient(to left, black, red);
	width: 200px;
	height: 200px;
}

Мисол . Бошқа йўналишни кўрсатамиз

Бошқа йўналишни кўрсатамиз:

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

#elem {
	background: linear-gradient(to top left, black, red);
	width: 200px;
	height: 200px;
}

Мисол . Ўлчам қўшамиз

Синтаксис:

селектор {
	background: linear-gradient(ранг1 ўлчам1, ранг2 ўлчам2);
}

Кейинги мисолда хатти-харакат куйидагича бўлади: тоза қизил ранг 0px дан 30px гача бўлади, 30px дан 50px гача қизил рангдан кўк рангга градиент бўлади, ва 50px дан охиригача - тоза кўк ранг:

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

#elem {
	background: linear-gradient(red 30px, blue 50px);
	width: 200px;
	height: 200px;
}

Мисол . `2` тадан ортиқ ранг қўшамиз

Синтаксис:

селектор {
	background: linear-gradient(ранг1 ўлчам1, ранг2 ўлчам2, ранг3 ўлчам3...);
}

Кейинги мисолда хатти-харакат куйидагича бўлади: тоза қизил ранг 0px дан 30px гача бўлади, 30px дан 50px гача қизил рангдан кўк рангга градиент бўлади, ва 50px дан 70px гача - кўк рангдан яхшил рангга градиент, ва 70px дан кейин - тоза яхшил ранг:

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

#elem {
	background: linear-gradient(red 30px, blue 50px, green 70px);
	width: 200px;
	height: 200px;
}

Мисол . Кескин ўтишлар

Кейинги мисолда хатти-харакат куйидагича бўлади: тоза қизил ранг 0px дан 30px гача бўлади, тоза кўк ранг - 30px дан 60px гача, тоза яхшил ранг - 60px дан кейин (red 0px ни ёзмаслик хам мумкин):

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

#elem {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
	width: 200px;
	height: 200px;
}

Мисол . Ўлчамларни фоизларда хам белгилаш мумкин

Кейинги мисолда хатти-харакат куйидагича бўлади: тоза қизил ранг 0% дан 30% гача бўлади, тоза кўк ранг - 30% дан 60% гача, тоза яхшил ранг - 60% дан кейин (red 0% ни ёзмаслик хам мумкин):

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

#elem {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
	width: 200px;
	height: 200px;
}

Мисол . Background-size билан биргалиқда

Кейинги мисолда хатти-харакат куйидагича бўлади: тоза қизил ранг 0px дан 30px гача бўлади, тоза кўк ранг - 30px дан 60px гача, бу ҳолда бунинг ҳаммаси 60px ларда такроранувчи бўлади (background-size: 60px; сабабли):

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

#elem {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
	width: 200px;
	height: 200px;
}

Шунингдек қаранг

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

Функция linear-gradient

Синтаксис

Қийматлар

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

Мисол . Бурчак қўшамиз

Мисол . Йўналиш қўшамиз

Мисол . Бошқа йўналишни кўрсатамиз

Мисол . Ўлчам қўшамиз

Мисол . 2 тадан ортиқ ранг қўшамиз

Мисол . Кескин ўтишлар

Мисол . Ўлчамларни фоизларда хам белгилаш мумкин

Мисол . Background-size билан биргалиқда

Шунингдек қаранг

Мисол . `2` тадан ортиқ ранг қўшамиз