Konussimon gradientlar
CSS conic-gradient() funksiyasi
CSS conic-gradient() funksiyasi konik gradient yaratadi.
Konik gradient — rang o‘tishlari markaziy nuqta atrofida aylanadigan gradientdir.
Konik gradient yaratish uchun kamida ikkita rang belgilash kerak.
Sintaksis
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
Standart holatda, angle 0deg va position center (markaz) bo‘ladi.
Agar hech qanday degree ko‘rsatilmagan bo‘lsa, ranglar markaziy nuqta atrofida teng taqsimlanadi.
Konik gradient: uchta rang
Quyidagi misol uch rangli konik gradientni ko‘rsatadi:
Misol
Uch rangli konik gradient:
#grad {
background-image: conic-gradient(red, yellow, green);
}
O‘zingiz sinab ko‘ring »
Konik gradient: beshta rang
Quyidagi misol besh rangli konik gradientni ko‘rsatadi:
Misol
Besh rangli konik gradient:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
O‘zingiz sinab ko‘ring »
Konik gradient: uch rang va darajalar
Quyidagi misol uch rangli va har bir rang uchun darajali konik gradientni ko‘rsatadi:
Misol
Uch rangli va har bir rang uchun darajali konik gradient:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
O‘zingiz sinab ko‘ring »
Doiraviy diagrammalar yaratish
Konik gradientni doiraviy diagramma (pie) ko‘rinishida ko‘rsatish uchun shunchaki border-radius: 50% qo‘shing:
Misol
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Mana barcha ranglar uchun darajalar belgilangan yana bir doiraviy diagramma:
Misol
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Boshlanish burchagi ko‘rsatilgan konik gradient
[from angle] — butun konik gradientning aylanish burchagini belgilaydi.
Quyidagi misolda from burchagi 90deg bo‘lgan konik gradient ko‘rsatilgan:
Misol
from burchagi berilgan konik gradient:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
O‘zingiz sinab ko‘ring »
Markaz joylashuvi ko‘rsatilgan konik gradient
[at position] — konik gradient markazini belgilaydi.
Quyidagi misol 60% 45% markaz joylashuvli konik gradientni ko‘rsatadi:
Misol
Markaz joylashuvi ko‘rsatilgan konik gradient:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
O‘zingiz sinab ko‘ring »
CSS repeating-conic-gradient() funksiyasi
CSS repeating-conic-gradient() funksiyasi konik gradientlarni takrorlash uchun ishlatiladi:
Misol
Takrorlanuvchi konussimon gradient:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
Mana rang boshlanishlari va rang to‘xtashlari belgilangan takrorlanuvchi konik gradient:
Misol
Rang boshlanishlari va rang to‘xtashlari belgilangan takrorlanuvchi konik gradient:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
O‘zingiz sinab ko‘ring »
CSS gradient funksiyalari
Quyidagi jadval CSS gradient funksiyalarini sanab o‘tadi:
| Function | Tavsif |
|---|---|
| conic-gradient() | Konussimon gradient yaratadi. Kamida ikkita rangni belgilang (markaziy nuqta atrofida) |
| linear-gradient() | Chiziqli gradient yaratadi. Kamida ikkita rangni belgilang (yuqoridan pastga) |
| radial-gradient() | Radial gradient yaratadi. Kamida ikkita rangni belgilang (markazdan chetlarga) |
| repeating-conic-gradient() | Konussimon gradientni takrorlaydi |
| repeating-linear-gradient() | Chiziqli gradientni takrorlaydi |
| repeating-radial-gradient() | Radial gradientni takrorlaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!