सीएसएस ग्रेडिएंट
CSS ग्रेडिएंट आपको दो या अधिक निर्दिष्ट रंगों के बीच सहज ट्रांज़िशन प्रदर्शित करने देता है।
CSS तीन प्रकार के ग्रेडिएंट को परिभाषित करता है:
- रैखिक ग्रेडियेंट (नीचे/ऊपर/बाएं/दाएं/तिरछे जाता है)
- रेडियल ग्रेडियेंट (उनके केंद्र द्वारा परिभाषित)
- शंक्वाकार ढाल (एक केंद्र बिंदु के चारों ओर घुमाया गया)
सीएसएस रैखिक ग्रेडियेंट
एक लीनियर ग्रेडिएंट बनाने के लिए आपको कम से कम दो कलर स्टॉप्स को परिभाषित करना होगा। कलर स्टॉप वे रंग हैं जिनके बीच आप सहज ट्रांज़िशन प्रस्तुत करना चाहते हैं। आप ढाल प्रभाव के साथ एक प्रारंभिक बिंदु और एक दिशा (या कोण) भी सेट कर सकते हैं।
वाक्य - विन्यास
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
दिशा - ऊपर से नीचे (यह डिफ़ॉल्ट है)
निम्न उदाहरण एक रैखिक ढाल दिखाता है जो शीर्ष पर शुरू होता है। यह लाल होने लगता है, पीले रंग में बदल जाता है:
उदाहरण
#grad {
background-image: linear-gradient(red, yellow);
}
दिशा - बाएं से दाएं
निम्न उदाहरण एक रैखिक ढाल दिखाता है जो बाईं ओर से शुरू होता है। यह लाल होने लगता है, पीले रंग में बदल जाता है:
उदाहरण
#grad {
background-image: linear-gradient(to right, red , yellow);
}
दिशा - विकर्ण
आप क्षैतिज और ऊर्ध्वाधर दोनों प्रारंभिक स्थितियों को निर्दिष्ट करके तिरछे ढाल बना सकते हैं।
निम्न उदाहरण एक रैखिक ढाल दिखाता है जो ऊपर बाईं ओर से शुरू होता है (और नीचे दाईं ओर जाता है)। यह लाल होने लगता है, पीले रंग में परिवर्तित हो जाता है:
उदाहरण
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
कोणों का उपयोग करना
यदि आप ढाल की दिशा पर अधिक नियंत्रण चाहते हैं, तो आप पूर्वनिर्धारित दिशाओं (नीचे, ऊपर, दाएं, बाएं, नीचे दाएं, आदि) के बजाय कोण को परिभाषित कर सकते हैं। 0deg का मान "शीर्ष पर" के बराबर है। 90deg का मान "दाईं ओर" के बराबर है। 180 डिग्री का मान "नीचे से नीचे" के बराबर है।
वाक्य - विन्यास
background-image: linear-gradient(angle, color-stop1, color-stop2);
निम्न उदाहरण दिखाता है कि रैखिक ग्रेडिएंट पर कोणों का उपयोग कैसे किया जाता है:
उदाहरण
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
एकाधिक रंग स्टॉप का उपयोग करना
निम्न उदाहरण एकाधिक रंग स्टॉप के साथ एक रैखिक ढाल (ऊपर से नीचे तक) दिखाता है:
उदाहरण
#grad {
background-image: linear-gradient(red, yellow, green);
}
निम्न उदाहरण दिखाता है कि इंद्रधनुष के रंग और कुछ पाठ के साथ एक रैखिक ढाल (बाएं से दाएं) कैसे बनाया जाए:
उदाहरण
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
पारदर्शिता का उपयोग करना
CSS ग्रेडिएंट पारदर्शिता का भी समर्थन करते हैं, जिसका उपयोग लुप्त होती प्रभाव बनाने के लिए किया जा सकता है।
पारदर्शिता जोड़ने के लिए, हम रंग स्टॉप को परिभाषित करने के लिए आरजीबीए () फ़ंक्शन का उपयोग करते हैं। आरजीबीए () फ़ंक्शन में अंतिम पैरामीटर 0 से 1 तक का मान हो सकता है, और यह रंग की पारदर्शिता को परिभाषित करता है: 0 पूर्ण पारदर्शिता इंगित करता है, 1 पूर्ण रंग इंगित करता है (कोई पारदर्शिता नहीं)।
निम्न उदाहरण एक रैखिक ढाल दिखाता है जो बाईं ओर से शुरू होता है। यह पूरी तरह से पारदर्शी शुरू होता है, पूर्ण रंग लाल में परिवर्तित होता है:
उदाहरण
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
एक रेखीय-ढाल को दोहराते हुए
रिपीटिंग-लीनियर-ग्रेडिएंट () फ़ंक्शन का उपयोग लीनियर ग्रेडिएंट्स को दोहराने के लिए किया जाता है:
उदाहरण
एक दोहराई जाने वाली रैखिक ढाल:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}