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` ден ашык түстөрдү кошуу