ग्रेडिएंट

द सीएसएस पॉडकास्ट - 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 - कोनिक ग्रेडिएंट का उपयोगी संग्रह
• ग्रेडिएंट के लिए एमडीएन गाइड
• ग्रेडिएंट जनरेटर

देखें कि आपको कितना समझ आया है

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