ग्रेडिएंट

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

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

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

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

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

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

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

ग्रेडिएंट फ़ंक्शन में सिर्फ़ एक रंग का इस्तेमाल करना, मान्य सीएसएस है. हालांकि, इससे सिर्फ़ एक रंग का इस्तेमाल होगा:

.my-element {
    background: linear-gradient(red);
}

आपके पास ऐंगल या ऐंगल दिखाने वाले कीवर्ड भी पास करने का विकल्प है. अगर आपको कीवर्ड का इस्तेमाल करना है, तो 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 प्रॉपर्टी पर ग्रेडिएंट फ़ंक्शन को भी मिक्स किया जा सकता है. साथ ही, बैकग्राउंड इमेज की तरह ही, जितने चाहे उतने ग्रेडिएंट तय किए जा सकते हैं. उदाहरण के लिए, एक साथ कई लीनियर-ग्रेडिएंट या रेडियल ग्रेडिएंट के साथ दो लीनियर-ग्रेडिएंट को मिलाया जा सकता है.

इंटरपोलेशन और कलर स्पेस

हर ग्रेडिएंट टाइप, कलर स्पेस और in कीवर्ड का इस्तेमाल करके, रंगों के बीच अलग-अलग तरीके से इंटरपोलेशन कर सकता है. इस विकल्प की मदद से, ग्रेडिएंट में दो कलर स्टॉप के बीच के नतीजों को पसंद के मुताबिक बनाया जा सकता है.

उदाहरण के लिए, oklab कलर स्पेस का इस्तेमाल करके, आम तौर पर मध्यम रंगों को हटाया जा सकता है. इससे, ज़्यादा सुरक्षित और ज़्यादा चमकदार ग्रेडिएंट बनाया जा सकता है.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

इस डेमो की मदद से, एक ही ग्रेडिएंट की तुलना, पसंद के मुताबिक इंटरपोलेशन के साथ और उसके बिना की जा सकती है. कलर स्पेस बदलकर देखें कि उनकी तुलना कैसे की जाती है. इसके अलावा, रंग बदलकर भी देखें कि इंटरपोलेशन का ग्रेडिएंट पर क्या असर पड़ता है.

ग्रेडिएंट के एक रंग से दूसरे रंग में बदलने के दौरान, ह्यू ऐंगल के प्रोग्रेस की दिशा को कंट्रोल करने के लिए, सिलेंडर के आकार वाले कलर स्पेस के साथ increasing या decreasing कीवर्ड का भी इस्तेमाल किया जा सकता है. ऐंगल हमेशा चुने गए कीवर्ड की दिशा में ही चलेगा, भले ही वह लंबा हो या छोटा.

.my-element.increasing {
  background: linear-gradient(in oklch increasing hue, deeppink, yellow);
}

.my-element.decreasing {
  background: linear-gradient(in oklch decreasing hue, deeppink, yellow);
}

इंटरपोलेशन को पसंद के मुताबिक बनाने के अलावा, सिलेंडर के आकार वाले कलर स्पेस (एचएसएल, एचडब्ल्यूबी, एलसीएच, और ओकेएलसीएच) में shorter (डिफ़ॉल्ट) या longer कीवर्ड का इस्तेमाल करके यह तय किया जा सकता है कि ग्रेडिएंट लाइन को कलर व्हील के आस-पास लंबा रास्ता लेना चाहिए या दो रंगों के बीच छोटा रास्ता.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

संसाधन

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

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

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