सीएसएस कॉनिक ग्रेडिएंट्स
सीएसएस कॉनिक ग्रेडिएंट्स
एक शंकु ढाल एक केंद्र बिंदु के चारों ओर घुमाए गए रंग संक्रमण के साथ एक ढाल है।
एक शंकु ढाल बनाने के लिए आपको कम से कम दो रंगों को परिभाषित करना होगा।
वाक्य - विन्यास
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
डिफ़ॉल्ट रूप से, कोण 0deg होता है और स्थिति केंद्र होती है।
यदि कोई डिग्री निर्दिष्ट नहीं है, तो रंग केंद्र बिंदु के चारों ओर समान रूप से फैले होंगे।
शंकु ढाल: तीन रंग
निम्नलिखित उदाहरण तीन रंगों के साथ एक शंकु ढाल दिखाता है:
उदाहरण
तीन रंगों वाला एक शंक्वाकार ढाल:
#grad {
background-image: conic-gradient(red, yellow, green);
}
शंकु ढाल: पांच रंग
निम्नलिखित उदाहरण पांच रंगों के साथ एक शंक्वाकार ढाल दिखाता है:
उदाहरण
पांच रंगों वाला एक शंक्वाकार ढाल:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
शंकु ढाल: तीन रंग और डिग्री
निम्नलिखित उदाहरण तीन रंगों के साथ एक शंकु ढाल और प्रत्येक रंग के लिए एक डिग्री दिखाता है:
उदाहरण
तीन रंगों के साथ एक शंकु ढाल और प्रत्येक रंग के लिए एक डिग्री:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
पाई चार्ट बनाएं
border-radius: 50%शंकु ढाल को पाई की तरह दिखने के लिए बस जोड़ें :
उदाहरण
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
यहाँ सभी रंगों के लिए परिभाषित डिग्री के साथ एक और पाई चार्ट है:
उदाहरण
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
कोण से निर्दिष्ट के साथ शंकु ढाल
[ कोण से ] उस कोण को निर्दिष्ट करता है जिसके द्वारा संपूर्ण शंकु ढाल घुमाया जाता है।
निम्न उदाहरण 90 डिग्री के कोण से एक शंकु ढाल दिखाता है:
उदाहरण
कोण से एक शंक्वाकार ढाल:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
निर्दिष्ट केंद्र स्थिति के साथ शंकु ढाल
[ स्थिति पर ] शंक्वाकार ढाल के केंद्र को निर्दिष्ट करता है।
निम्न उदाहरण 60% 45% की केंद्र स्थिति के साथ एक शंकु ढाल दिखाता है:
उदाहरण
एक निर्दिष्ट केंद्र स्थिति के साथ एक शंकु ढाल:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
एक शंकु ढाल दोहराना
फ़ंक्शन का repeating-conic-gradient()उपयोग शंकु ग्रेडिएंट को दोहराने के लिए किया जाता है:
उदाहरण
एक दोहराई जाने वाली शंकु ढाल:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
परिभाषित रंग-शुरू और रंग-स्टॉप के साथ दोहराई जाने वाली शंकु ढाल यहां दी गई है:
उदाहरण
परिभाषित रंग-शुरू और रंग-स्टॉप के साथ एक दोहराई जाने वाली शंकु ढाल:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
सीएसएस ग्रेडिएंट फ़ंक्शंस
निम्न तालिका CSS ग्रेडिएंट फ़ंक्शंस को सूचीबद्ध करती है:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |