conic-gradient()
CSS conic-gradient() funksiyasi fon rasmi sifatida konik gradientni o‘rnatadi.
Konik gradient — rang o‘tishlari markaziy nuqta atrofida aylanib joylashgan gradient (doiraviy diagrammalar va rang g‘ildiraklari kabi).
Konik gradient yaratish uchun kamida ikkita rang to‘xtash nuqtasini (color stop) belgilashingiz kerak.
Konik gradient misoli:
Misol
Uch rangli konik gradient:
#grad {
background-image: conic-gradient(red, yellow, green);
}
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 | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69 | 79 | 83 | 12.1 | 56 |
CSS sintaksisi
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| Qiymat | Tavsif |
|---|---|
| from angle | Ixtiyoriy. Butun konik gradient shu burchakka buriladi. Standart qiymat: 0deg |
| at position | Ixtiyoriy. Konik gradientning markazini belgilaydi. Standart qiymat: center |
| color degree, ..., color degree | Rang to‘xtash nuqtalari — ular orasida silliq o‘tishlar hosil qilmoqchi bo‘lgan ranglaringiz. Bu qiymat rang qiymati va undan keyin keladigan ixtiyoriy to‘xtash joyidan (0 dan 360 gacha bo‘lgan gradus yoki 0% dan 100% gacha bo‘lgan foiz) iborat. |
| Versiya: | CSS3 |
|---|
Ko‘proq misollar
Misol
Besh rangli konik gradient:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
O‘zingiz sinab ko‘ring »
Misol
Uch rangli va har bir rang uchun gradus ko‘rsatilgan konik gradient:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
O‘zingiz sinab ko‘ring »
Misol
border-radius: 50% qo‘shib, konik gradientni doiraviy diagrammaga (pie) o‘xshating:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Misol
from burchagi ko‘rsatilgan konik gradient:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Misol
at joylashuvi ko‘rsatilgan konik gradient:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Misol
from burchagi va at joylashuvi ko‘rsatilgan konik gradient:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Misol
Yana bir doiraviy diagramma:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS gradientlari
CSS ma’lumotnomasi: CSS background-image xususiyati
CSS ma’lumotnomasi: CSS linear-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!