सीएसएस रेडियल ग्रेडियेंट
सीएसएस रेडियल ग्रेडियेंट
एक रेडियल ग्रेडिएंट को इसके केंद्र द्वारा परिभाषित किया जाता है।
रेडियल ग्रेडिएंट बनाने के लिए आपको कम से कम दो रंग स्टॉप भी परिभाषित करने होंगे।
वाक्य - विन्यास
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
डिफ़ॉल्ट रूप से, आकार अंडाकार होता है, आकार सबसे दूर-कोना होता है, और स्थिति केंद्र होती है।
रेडियल ग्रेडिएंट - समान रूप से दूरी वाले रंग स्टॉप (यह डिफ़ॉल्ट है)
निम्न उदाहरण समान दूरी वाले रंग स्टॉप के साथ एक रेडियल ग्रेडिएंट दिखाता है:
उदाहरण
#grad {
background-image: radial-gradient(red, yellow, green);
}
रेडियल ग्रैडिएंट - अलग-अलग दूरी वाले कलर स्टॉप
निम्न उदाहरण अलग-अलग स्थान वाले रंग स्टॉप के साथ एक रेडियल ग्रेडिएंट दिखाता है:
उदाहरण
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
आकार सेट करें
आकार पैरामीटर आकार को परिभाषित करता है। यह मान वृत्त या दीर्घवृत्त ले सकता है। डिफ़ॉल्ट मान अंडाकार है।
निम्न उदाहरण एक वृत्त के आकार के साथ एक रेडियल ढाल दिखाता है:
उदाहरण
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
विभिन्न आकार के कीवर्ड का उपयोग
आकार पैरामीटर ढाल के आकार को परिभाषित करता है। यह चार मान ले सकता है:
- निकटतम पक्ष
- सबसे दूर की ओर
- निकटतम कोने
- सबसे दूर का कोना
उदाहरण
विभिन्न आकार के कीवर्ड के साथ एक रेडियल ग्रेडिएंट:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
एक रेडियल-ग्रेडिएंट दोहराना
रेडियल ग्रेडिएंट को दोहराने के लिए रिपीटिंग-रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग किया जाता है:
उदाहरण
एक दोहराई जाने वाली रेडियल ग्रेडिएंट:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}