⌘K

Функция linear-gradient

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

Синтаксис

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

Қийматлар

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

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

Синтаксис: 

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

Синтаксис: 

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

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

Синтаксис: 

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

Синтаксис: 

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

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

Синтаксис: 

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

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

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

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

html<div id="elem"></div>
css#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% ни ёзмаслик хам мумкин): 

html<div id="elem"></div>
css#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; сабабли): 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

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

BackVisibility propertyNextФункция radial-gradient