linear-gradient()
CSS linear-gradient() funksiyasi fon sifatida chiziqli gradient yaratadi.
Chiziqli gradient yaratish uchun kamida ikkita rang to‘xtash nuqtasini belgilashingiz kerak. Rang to‘xtash nuqtalari — ular orasida silliq o‘tishlar hosil qilmoqchi bo‘lgan ranglaringiz. Gradient effekti bilan birga boshlang‘ich nuqta va yo‘nalishni (yoki burchakni) ham belgilashingiz mumkin.
Chiziqli gradient misoli:
Misol
Bu chiziqli gradient yuqoridan boshlanadi. U qizil rangdan boshlanib, sariqqa, so‘ngra ko‘kka o‘tadi:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26 | 10 | 16 | 6.1 | 12.1 |
| Ikki pozitsiyali rang to‘xtash nuqtalari | 71 | 79 | 64 | 12.1 | 58 |
CSS sintaksisi
linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
| Qiymat | Tavsif |
|---|---|
| side-or-corner | Ixtiyoriy. Gradientning boshlang‘ich nuqtasi. to kalit so‘zi bilan boshlanadi, undan keyin ko‘pi bilan yana ikkita kalit so‘z keladi:
|
| angle | Ixtiyoriy. Gradient chizig‘ining yo‘nalish burchagi:
|
| color-stop1, color-stop2,... | Majburiy. Rang to‘xtash nuqtalari — ular orasida silliq o‘tishlar hosil qilmoqchi bo‘lgan ranglaringiz. Bu qiymat rang qiymati va undan keyin keladigan ixtiyoriy bir yoki ikki pozitsiyali to‘xtash nuqtasidan (0% dan 100% gacha bo‘lgan foiz yoki gradient o‘qi bo‘ylab uzunlik) iborat. |
| Versiya: | CSS3 |
|---|
Ko‘proq misollar
Misol
Chapdan boshlanadigan chiziqli gradient. U qizildan boshlanib, ko‘kka o‘tadi:
#grad {
background-image: linear-gradient(to right, red , blue);
}
O‘zingiz sinab ko‘ring »
Misol
Yuqori chap burchakdan boshlanadigan (va pastki o‘ng burchakka boradigan) chiziqli gradient:
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
O‘zingiz sinab ko‘ring »
Misol
Burchagi ko‘rsatilgan chiziqli gradient:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
O‘zingiz sinab ko‘ring »
Misol
Ko‘plab rang to‘xtash nuqtalariga ega chiziqli gradient:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
O‘zingiz sinab ko‘ring »
Misol
Ikki pozitsiyali rang to‘xtash nuqtalariga ega chiziqli gradient:
#grad {
background: linear-gradient(
to right,
red 17%,
orange 17% 34%,
yellow 34% 51%,
green 51% 68%,
blue 68% 84%,
indigo 84%
);
}
O‘zingiz sinab ko‘ring »
Misol
Shaffoflikka ega chiziqli gradient:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS gradientlari
CSS ma’lumotnomasi: CSS background-image xususiyati
CSS ma’lumotnomasi: CSS conic-gradient() funksiyasi
CSS ma’lumotnomasi: CSS radial-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-conic-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-linear-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-radial-gradient() funksiyasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!