सीएसएस पॉडकास्ट - 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, ग्रेडिएंट के केंद्र के पास वाले बॉक्स के किनारे से मिल जाएगा.closest-sideका उलटाfarthest-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 - शंकु ग्रेडिएंट का उपयोगी संग्रह
- ग्रेडिएंट के लिए एमडीएन गाइड
- ग्रेडिएंट जनरेटर
आपने जो सीखा है उसकी जांच करें
ग्रेडिएंट के बारे में अपनी जानकारी परखें
ग्रेडिएंट बनाने के लिए, रंगों की कम से कम संख्या कितनी होनी चाहिए?
एलिमेंट में बैकग्राउंड के तौर पर एक से ज़्यादा ग्रेडिएंट हो सकते हैं?
background-image प्रॉपर्टी में कई ग्रेडिएंट इस्तेमाल करने की अनुमति है. उन्हें सिर्फ़ कॉमा लगाकर अलग करें.