ग्रेडिएंट

सीएसएस पॉडकास्ट - 021: ग्रेडिएंट

मान लें कि आपको एक साइट बनानी है और सबसे ऊपर, शीर्षक, खास जानकारी, और बटन के साथ एक परिचय है. डिज़ाइनर ने इस इंट्रो के लिए एक डिज़ाइन दिया है, जिसमें बैंगनी रंग का बैकग्राउंड है. सिर्फ़ एक समस्या है कि बैकग्राउंड में बैंगनी रंग के दो शेड, ग्रेडिएंट के तौर पर इस्तेमाल किए गए हैं. ऐसा कैसे किया जाता है?

आपको शायद शुरू में लगे कि इसके लिए, आपको अपने डिज़ाइन टूल से इमेज एक्सपोर्ट करनी होगी. हालांकि, इसके बजाय linear-gradient का इस्तेमाल किया जा सकता है.

ग्रेडिएंट एक इमेज होती है और इसका इस्तेमाल जहां भी इमेज का इस्तेमाल किया जा सकता है वहां किया जा सकता है. हालांकि, इसे सीएसएस की मदद से बनाया जाता है और यह रंगों, संख्याओं, और ऐंगल से बनी होती है. सीएसएस ग्रेडिएंट की मदद से, दो रंगों के बीच स्मूद ग्रेडिएंट से लेकर, कई ग्रेडिएंट को मिलाकर और दोहराकर शानदार आर्टवर्क तक बनाया जा सकता है.

रेखीय ग्रेडिएंट

linear-gradient() फ़ंक्शन, दो या उससे ज़्यादा रंगों की इमेज को धीरे-धीरे जनरेट करता है. इसमें कई आर्ग्युमेंट होते हैं, लेकिन सबसे आसान कॉन्फ़िगरेशन में, कुछ रंगों को इस तरह पास किया जा सकता है. इससे, उन्हें ब्लेंड करते समय अपने-आप बराबर हिस्सों में बांट दिया जाएगा.

.my-element {
    background: linear-gradient(black, white);
}

आपके पास ऐंगल या ऐंगल दिखाने वाले कीवर्ड भी पास करने का विकल्प है. अगर आपको कीवर्ड का इस्तेमाल करना है, तो to कीवर्ड के बाद कोई निर्देश दें. इसका मतलब है कि अगर आपको काले और सफ़ेद रंग का ऐसा ग्रेडिएंट चाहिए जो बाईं ओर (काले) से दाईं ओर (सफ़ेद) तक हो, तो आपको पहले आर्ग्युमेंट के तौर पर ऐंगल को to right के तौर पर बताना होगा.

.my-element {
    background: linear-gradient(to right, black, white);
}

कलर स्टॉप वैल्यू, जहां रंग खत्म होता है और अपने आस-पास के रंगों के साथ मिल जाता है. अगर ग्रेडिएंट की शुरुआत लाल रंग के गहरे शेड से होती है और वह 45 डिग्री के कोण पर चलता है, तो ग्रेडिएंट के 30% हिस्से पर रंग हल्का लाल हो जाता है. यह इस तरह दिखता है.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

linear-gradient() में जितने चाहें उतने रंग और कलर स्टॉप जोड़े जा सकते हैं. साथ ही, हर ग्रेडिएंट को कॉमा लगाकर अलग करके, एक-दूसरे के ऊपर लेयर की जा सकती हैं.

रेडियल ग्रेडिएंट

सर्कुलर तरीके से रेडिएट होने वाला ग्रेडिएंट बनाने के लिए, radial-gradient() फ़ंक्शन का इस्तेमाल करें. यह linear-gradient() से मिलता-जुलता है, लेकिन इसमें कोण के बजाय, कोई पोज़िशन और आखिरी शेप दिया जाता है. अगर सिर्फ़ रंग तय किए जाते हैं, तो radial-gradient() अपने-आप center के तौर पर पोज़िशन चुन लेगा और बॉक्स के साइज़ के आधार पर, सर्कल या दीर्घवृत्त चुन लेगा.

.my-element {
    background: radial-gradient(white, black);
}

कीवर्ड और/या संख्या वैल्यू का इस्तेमाल करके, ग्रेडिएंट की पोज़िशन background-position जैसी ही होती है. रेडियल ग्रेडिएंट के साइज़ से, ग्रेडिएंट के आखिरी आकार (सर्कल या दीर्घवृत्त) का साइज़ तय होता है. यह डिफ़ॉल्ट रूप से farthest-corner होगा. इसका मतलब है कि यह बॉक्स के बीच से सबसे दूर के कोने तक पहुंचता है. इन कीवर्ड का भी इस्तेमाल किया जा सकता है:

• closest-corner, ग्रेडिएंट के बीच के सबसे नज़दीकी कोने से मिल जाएगा.
• closest-side, ग्रेडिएंट के बीच में मौजूद बॉक्स की साइड से मिल जाएगा.
• farthest-side, closest-side के उलट काम करेगा.

linear-gradient की तरह ही, जितने चाहें उतने कलर स्टॉप जोड़े जा सकते हैं. इसी तरह, जितने चाहें उतने radial-gradients जोड़े जा सकते हैं.

कोनिक ग्रेडिएंट

कोनिक ग्रेडिएंट में आपके बॉक्स में एक सेंटर पॉइंट होता है. यह डिफ़ॉल्ट रूप से सबसे ऊपर से शुरू होता है और 360 डिग्री के सर्कल में घूमता है.

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() फ़ंक्शन, पोज़िशन और ऐंगल आर्ग्युमेंट स्वीकार करता है.

डिफ़ॉल्ट रूप से, ऐंगल 0 डिग्री होता है, जो सबसे ऊपर बीच में से शुरू होता है. अगर आपको ऐंगल को 45deg पर सेट करना है, तो यह सबसे ऊपर दाएं कोने में होगा. ऐंगल आर्ग्युमेंट में, ऐंगल की किसी भी तरह की वैल्यू डाली जा सकती है. जैसे, लीनियर और रेडियल ग्रेडिएंट.

यह पोज़िशन डिफ़ॉल्ट रूप से बीच में होती है. रेडियल और लीनियर ग्रेडिएंट की तरह ही, पोज़िशनिंग कीवर्ड पर आधारित हो सकती है या इसे संख्या वाली वैल्यू के साथ तय किया जा सकता है.

अन्य ग्रेडिएंट टाइप की तरह ही, इसमें जितने चाहें उतने कलर स्टॉप जोड़े जा सकते हैं. इस सुविधा का इस्तेमाल करने का एक अच्छा उदाहरण, सीएसएस की मदद से पाई चार्ट को रेंडर करना है.

दोहराना और मिक्स करना

हर तरह के ग्रेडिएंट का एक दोहराने वाला टाइप भी होता है. ये हैं repeating-linear-gradient(), repeating-radial-gradient(), और repeating-conic-gradient(). ये फ़ंक्शन, बार-बार इस्तेमाल न होने वाले फ़ंक्शन से मिलते-जुलते हैं और इनमें एक जैसे आर्ग्युमेंट इस्तेमाल किए जाते हैं. अंतर यह है कि अगर बॉक्स को भरने के लिए, तय किए गए ग्रेडिएंट को दोहराया जा सकता है, तो ऐसा किया जाएगा. ऐसा, बॉक्स के दोनों साइज़ के आधार पर किया जाएगा.

अगर आपका ग्रेडिएंट दोहराया नहीं जा रहा है, तो हो सकता है कि आपने कलर स्टॉप में से किसी एक के लिए लंबाई सेट न की हो. उदाहरण के लिए, रंग के स्टॉप की लंबाई सेट करके, repeating-linear-gradient के साथ स्ट्रिप वाला बैकग्राउंड बनाया जा सकता है.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background प्रॉपर्टी पर ग्रेडिएंट फ़ंक्शन को भी मिक्स किया जा सकता है. साथ ही, बैकग्राउंड इमेज की तरह ही, जितने चाहें उतने ग्रेडिएंट तय किए जा सकते हैं. उदाहरण के लिए, एक साथ कई लीनियर-ग्रेडिएंट या रेडियल ग्रेडिएंट के साथ दो लीनियर-ग्रेडिएंट को मिलाया जा सकता है.

संसाधन

• Conic.css - कोनिक ग्रेडिएंट का एक काम का कलेक्शन
• ग्रेडिएंट के लिए MDN गाइड
• ग्रेडिएंट जनरेटर

देखें कि आपको क्या समझ आया

ग्रेडिएंट के बारे में अपनी जानकारी की जांच करना