सीएसएस ग्रेडिएंट
- पिछला पृष्ठ सीएसएस रंग शब्द
- अगला पृष्ठ सीएसएस रेडियल ग्रेडिएंट
CSS ग्रेडिएंट आपको दो या अधिक निर्दिष्ट रंगों के बीच साम्य रंगांत का प्रदर्शन करने की सुविधा प्रदान करता है。
CSS ने दो प्रकार के ग्रेडिएंट को परिभाषित किया है:
- लाइनार ग्रेडिएंट（नीचे/ऊपर/बाएं/दाएं/ज्यामितीय）
- रेखीय ग्रेडिएंट（इसके केंद्र से परिभाषित है）
CSS लाइनार ग्रेडिएंट
लाइनार ग्रेडिएंट बनाने के लिए, आपको कम से कम दो रंग स्केल निर्दिष्ट करना होगा। रंग स्केल वह रंग हैं जो आप प्रदर्शित करना चाहते हैं। आप यहां शुरूआती बिन्दु और दिशा (या कोण) और ग्रेडिएंट प्रभाव को भी सेट कर सकते हैं。
संरचना
background-image: linear-gradient(दिशा, 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 का मान ऊपर (to top) के बराबर है। 90deg का मान दायां (to right) के बराबर है। 180deg का मान नीचे (to bottom) के बराबर है。
संरचना
background-image: linear-gradient(angle, color-stop1, color-stop2);
इस कोण को होगामी रेखा और ग्रेडिएंट रेखा के बीच का कोण निर्धारित करता है。
नीचे दिए उदाहरण में रेखीय ग्रेडिएंट पर कैसे कोण का उपयोग किया जा सकता है दिखाया गया है:
इंस्टेंस
#grad {
background-image: linear-gradient(-90deg, 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 ग्रेडिएंट पारदर्शिता को भी समर्थित करता है और ग्रेडिएंट इफेक्ट को बनाने के लिए भी उपयोग किया जा सकता है。
अगर पारदर्शिता जोड़ना है, हम rgba() फ़ंक्शन का उपयोग करते हैं ताकि रंग-सूचक निर्धारित किया जाए। rgba() फ़ंक्शन का अंतिम पारामीटर 0 से 1 के बीच का मान हो सकता है, जो रंग की पारदर्शिता को निर्धारित करता है: 0 पूर्ण पारदर्शी को निर्धारित करता है, 1 पूर्ण रंग (पारदर्शी नहीं) को निर्धारित करता है。
नीचे का उदाहरण बाईं ओर से शुरू होने वाले रेखागत ग्रेडिएंट को दिखाता है।यह पूर्ण रूप से पारदर्शी है और फिर पूर्ण रंगीन लाल होता है:}
इंस्टेंस
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
पूर्णाकार रेखागत ग्रेडिएंट रीपीटिंग
repeating-linear-gradient() पूर्णाकार रेखागत ग्रेडिएंट के लिए फ़ंक्शन इस्तेमाल करें:
इंस्टेंस
पूर्णाकार रेखागत ग्रेडिएंट रीपीटिंग:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
- पिछला पृष्ठ सीएसएस रंग शब्द
- अगला पृष्ठ सीएसएस रेडियल ग्रेडिएंट
