CSS बैकग्राउंड ग्रेडिएंट के साथ स्टाइल वेबसाइट एलिमेंट्स

यदि आप कुछ मिनटों से अधिक समय से इंटरनेट पर हैं, तो संभावना है कि आप एक सीएसएस ग्रेडिएंट में आ गए हैं। CSS बैकग्राउंड प्रॉपर्टी का उपयोग विभिन्न शैलियों की एक श्रृंखला बनाने के लिए किया जा सकता है, और सबसे दिलचस्प प्रकारों में से एक यह है कि यह ग्रेडिएंट वैल्यू के साथ क्या कर सकता है।

किसी भी सॉफ्टवेयर डिजाइनर या डेवलपर के लिए विभिन्न सीएसएस ग्रेडिएंट्स को डिजाइन और बनाने का तरीका जानना एक संपत्ति है। इस लेख से, आप अपनी परियोजनाओं में सीएसएस ग्रेडिएंट्स को शामिल करना शुरू करने के लिए आवश्यक सब कुछ सीखेंगे।

CSS ग्रेडिएंट क्या है?

एक सीएसएस ग्रेडिएंट अनिवार्य रूप से दो या दो से अधिक रंगों का संयोजन है जो आसानी से एक से दूसरे में संक्रमण करता है। CSS ग्रेडिएंट की संक्रमणकालीन स्थिति उपयोग किए गए ग्रेडिएंट के प्रकार पर निर्भर करती है। सॉफ़्टवेयर डिज़ाइन में आमतौर पर उपयोग किए जाने वाले दो मुख्य प्रकार के ग्रेडिएंट होते हैं: रैखिक और रेडियल।

हालांकि, एक तीसरे प्रकार का ग्रेडिएंट है जो कम लोकप्रिय है और इसे कॉनिक ग्रेडिएंट के रूप में जाना जाता है।

सीएसएस ग्रेडिएंट सिंटैक्स

 Background-image: gradient-type (direction, color1, color2);

CSS ग्रेडिएंट को बैकग्राउंड-इमेज CSS प्रॉपर्टी को सौंपा जाना चाहिए। ढाल प्रकार कई में से एक हो सकता है; रैखिक-ढाल, रेडियल-ढाल, या शंकु-ढाल। ग्रेडिएंट प्रकार के बाद ब्रैकेट को खोलना और बंद करना होता है जिसमें ग्रेडिएंट की संक्रमणकालीन दिशा होती है, साथ ही ग्रेडिएंट में शामिल किए जाने वाले रंग भी होते हैं।

सम्बंधित: CSS में बैकग्राउंड इमेज कैसे सेट करें

ऊपर दिया गया उदाहरण दो रंग दिखाता है, लेकिन एक ग्रेडिएंट में कई अलग-अलग रंग हो सकते हैं। केवल आवश्यकता यह है कि सूची में प्रत्येक रंग को अल्पविराम से अलग किया जाता है।

एक रैखिक ढाल क्या है?

रैखिक ढाल सबसे लोकप्रिय सीएसएस ढाल है। यह दो या दो से अधिक रंगों का उपयोग करके एक क्षैतिज, लंबवत, या विकर्ण संक्रमण ढाल बनाता है।

सीएसएस रैखिक ढाल उदाहरणd

 Background-image: linear-gradient(#00A4CCFF, #F95700FF);

उपरोक्त कोड निम्नलिखित सीएसएस ग्रेडिएंट का उत्पादन करेगा:

ऊपर के उदाहरण से छोड़े गए ग्रेडिएंट सिंटैक्स का एक प्रमुख घटक है। यह घटक ढाल की संक्रमणकालीन दिशा है, और इसे छोड़ दिया गया क्योंकि रैखिक ढाल का डिफ़ॉल्ट संरेखण लंबवत (ऊपर से नीचे) है; इस उदाहरण में वांछित आउटपुट है।

उपरोक्त कोड कोड की निम्न पंक्ति के समान परिणाम उत्पन्न करता है। दोनों के बीच एकमात्र अंतर कोड के दिशा खंड का है।

बॉटम लीनियर ग्रैडिएंट उदाहरण का उपयोग करना

 Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

जैसा कि आप आउटपुट से देख सकते हैं कि उपरोक्त कोड एक ढाल बनाता है जो शीर्ष पर नीले रंग से शुरू होता है और फिर धीरे-धीरे नीचे नारंगी में संक्रमण करता है। यदि आप रंगों के क्रम को उलटना चाहते हैं तो आप बस नीचे से ऊपर की ओर प्रतिस्थापित कर सकते हैं और यह निम्न आउटपुट का उत्पादन करते हुए ढाल की दिशा को उलट देगा:

ऊर्ध्वाधर संरेखण के समान, एक ढाल के क्षैतिज संरेखण को दिशा कीवर्ड के दो सेटों के उपयोग के साथ प्राप्त किया जा सकता है: बाएं और दाएं , जो क्रमशः निम्नलिखित आउटपुट का उत्पादन करेगा।

विकर्ण रैखिक ढाल

एक रैखिक ढाल की किसी भी दिशा में एक विकर्ण रैखिक ढाल संक्रमण प्राप्त करना संभव है। कीवर्ड की केवल चार विशिष्ट सूचियां हैं जिन्हें आपको इसे संभव बनाने के लिए जानना आवश्यक है।

  • नीचे दाईं ओर
  • नीचे बाईं ओर
  • ऊपर दाईं ओर
  • ऊपर बाईं ओर

विकर्ण रैखिक ढाल उदाहरण का उपयोग करना

 Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

उपरोक्त उदाहरण निम्न आउटपुट उत्पन्न करता है:

जैसा कि आप ऊपर दिए गए आउटपुट से देख सकते हैं, लीनियर ग्रेडिएंट ग्रेडिएंट के ऊपरी बाएँ से नीचे दाएँ भाग की ओर बढ़ते हुए एक विकर्ण दिशा में अपना संक्रमण बनाता है।

बहुरंगी रैखिक ढाल

एक रैखिक ढाल में दो या दो से अधिक रंग हो सकते हैं, लेकिन एक ढाल में अधिक रंग क्या दिखते हैं? एक बहुरंगी रैखिक ढाल रंग व्यवस्था इसकी दिशा पर निर्भर है। एक क्षैतिज दिशा में संक्रमण करने वालों के पास रैखिक ढाल की सटीक दिशा के आधार पर, प्रत्येक नया रंग रेखीय ढाल के बाईं या दाईं ओर दिखाई देगा।

बहुरंगी रैखिक ढाल उदाहरण

 Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:

जैसा कि आप देख सकते हैं कि प्रत्येक नया रंग ढाल के दाईं ओर जोड़ा जाता है, जो अंततः इंद्रधनुष में रूपांतरित हो जाता है। एक ही आउटपुट एक ऊर्ध्वाधर दिशा में प्राप्त किया जा सकता है; हालांकि, रैखिक ढाल पर विशिष्ट रंग व्यवस्था लंबवत दिशा कीवर्ड (ऊपर या नीचे) पर निर्भर करेगी।

रेडियल ग्रेडिएंट क्या है?

रेडियल ग्रेडिएंट दो और रंगों का एक सर्पिलिंग ग्रेडिएंट बनाता है जो डिफ़ॉल्ट रूप से केंद्र से शुरू होता है। जहां रैखिक ढाल एक सीधी ढाल उत्पन्न करती है जो लंबवत या क्षैतिज रूप से बहती है, रेडियल ढाल एक गोलाकार ढाल उत्पन्न करती है जो केंद्र से बाहरी किनारों तक बहती है।

रेडियल ग्रेडिएंट उदाहरण का उपयोग करना

 Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:

रेडियल ग्रेडिएंट सेंटर बदलना

डिफ़ॉल्ट रूप से एक रेडियल ग्रेडिएंट ग्रेडिएंट के केंद्र में शुरू होता है; हालांकि, कुछ खोजशब्दों की शुरूआत के साथ मूल स्थान को बदलना संभव है।

रेडियल ग्रेडिएंट प्रारंभ स्थिति उदाहरण बदलना

 Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:

जैसा कि आप ग्रेडिएंट के ऊपर के आउटपुट से देख सकते हैं कि अब केंद्र के बजाय ऊपरी दाएं कोने से शुरू होता है। उपरोक्त कोड में शीर्ष दाईं ओर कीवर्ड शामिल करने के कारण यह परिवर्तन संभव है। रेडियल ग्रेडिएंट की उत्पत्ति के बिंदु को बदलने के लिए कीवर्ड की निम्नलिखित सूची का भी उपयोग किया जा सकता है:

  • बाएं से बाएं
  • नीचे दाएं
  • तली छोड़ें

बहुरंगी रेडियल ग्रेडियेंट

रैखिक ढाल की तरह, रेडियल ढाल भी दो और रंगों का उपयोग कर सकता है, प्रमुख अंतर यह है कि जहां रैखिक ढाल एक सीधी रेखा में ढाल में जोड़ता है, रेडियल ढाल बाहरी किनारे पर नए रंग जोड़ता है।

बहुरंगी रेडियल ग्रेडिएंट उदाहरण

 
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:

ग्रेडिएंट अनुकूलित करना

अब तक आपने देखा है कि किसी ग्रेडिएंट की दिशा और केंद्र बिंदु को कैसे बदला जाता है, लेकिन आपने यह नहीं देखा कि ग्रेडिएंट को कैसे कस्टमाइज़ किया जाए। ग्रेडिएंट को कस्टमाइज़ करना बहुत काम की तरह लग सकता है, लेकिन एक बार जब आप CSS बैकग्राउंड ग्रेडिएंट बनाने की मूल बातें समझ लेते हैं, तो अगला स्पष्ट कदम यह सीख रहा है कि अपने CSS ग्रेडिएंट्स को और अधिक विशिष्ट कैसे बनाया जाए।

डिफ़ॉल्ट रूप से, ग्रेडिएंट में रंग समान रूप से वितरित स्थान पर कब्जा कर लेते हैं, प्रत्येक रंग आसानी से इसके बाद एक में परिवर्तित हो जाता है। इसलिए यदि दो रंगों को एक ढाल बनाने के लिए जोड़ा जाता है, तो प्रत्येक रंग एक से दूसरे में संक्रमण करते समय उपलब्ध स्थान के आधे हिस्से पर कब्जा कर लेगा। यदि तीन रंगों को मिला दिया जाए तो प्रत्येक रंग उपलब्ध स्थान के एक तिहाई हिस्से पर कब्जा कर लेगा।

एक अनुकूलित ग्रेडिएंट के साथ, आप स्पष्ट रूप से कलर-स्टॉप स्थिति निर्दिष्ट करके एक ग्रेडिएंट में एक रंग द्वारा कब्जा किए जाने वाले स्थान की मात्रा को परिभाषित कर सकते हैं।

एक रैखिक ढाल को अनुकूलित करना उदाहरण 1

 Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:

ऊपर दिया गया आउटपुट रेखीय ग्रेडिएंट में दूसरा रंग दिखाता है, जो अपनी प्रथागत स्थिति के बजाय ग्रेडिएंट में पहले रंग के 30% बिंदु पर रुकता है, और क्योंकि दूसरा रंग भी ग्रेडिएंट में अंतिम रंग है, यह स्वाभाविक रूप से अंत तक फैलता है। .

यदि आप पहले रंग के अंत में उपरोक्त कोड में 30% रखना चाहते हैं तो चीजें स्पष्ट हो जानी चाहिए।

एक रैखिक ढाल को अनुकूलित करना उदाहरण 2

 Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

उपरोक्त कोड निम्न आउटपुट का उत्पादन करेगा।

उपरोक्त आउटपुट स्पष्ट रूप से ग्रेडिएंट में पहला रंग दिखाता है जो ग्रेडिएंट में दूसरे रंग के 30% बिंदु पर रुकता है। उपरोक्त उदाहरण के साथ यह उदाहरण रंग-रोक अनुकूलन को समझने में आपके लिए आसान बनाने में मदद करेगा।

रेडियल ग्रेडिएंट को कस्टमाइज़ करना उसी तरह से किया जाता है जैसे लीनियर ग्रेडिएंट। रेडियल ग्रेडिएंट में उपरोक्त समान परिणाम प्राप्त करने के लिए केवल एक चीज जो आपको करने की आवश्यकता है, वह है ग्रेडिएंट प्रकार और दिशा को बदलना।

CSS ग्रेडियेंट बनाना कभी आसान नहीं रहा

यह ट्यूटोरियल आलेख आपको रैखिक और रेडियल ग्रेडियेंट को पहचानने और बनाने के लिए टूल प्रदान करता है। यदि आपने इसे इस बिंदु तक पहुंचा दिया है, तो आपने दिशा और ढाल के केंद्र को बदलना सीख लिया है। इसके अतिरिक्त, अब आपके पास CSS ग्रेडिएंट को कस्टमाइज़ करने और अद्वितीय बैकग्राउंड ग्रेडिएंट बनाने का कौशल है।

हालाँकि, यदि आप सीधे नए और अद्वितीय ग्रेडिएंट बनाने में नहीं जाना चाहते हैं, तो आप कुछ बेहतरीन दिखने वाले पहले से मौजूद ग्रेडिएंट बनाकर शुरू कर सकते हैं।