यदि आप कुछ मिनटों से अधिक समय से इंटरनेट पर हैं, तो संभावना है कि आप एक सीएसएस ग्रेडिएंट में आ गए हैं। CSS बैकग्राउंड प्रॉपर्टी का उपयोग विभिन्न शैलियों की एक श्रृंखला बनाने के लिए किया जा सकता है, और सबसे दिलचस्प प्रकारों में से एक यह है कि यह ग्रेडिएंट वैल्यू के साथ क्या कर सकता है।
किसी भी सॉफ्टवेयर डिजाइनर या डेवलपर के लिए विभिन्न सीएसएस ग्रेडिएंट्स को डिजाइन और बनाने का तरीका जानना एक संपत्ति है। इस लेख से, आप अपनी परियोजनाओं में सीएसएस ग्रेडिएंट्स को शामिल करना शुरू करने के लिए आवश्यक सब कुछ सीखेंगे।
CSS ग्रेडिएंट क्या है?
एक सीएसएस ग्रेडिएंट अनिवार्य रूप से दो या दो से अधिक रंगों का संयोजन है जो आसानी से एक से दूसरे में संक्रमण करता है। CSS ग्रेडिएंट की संक्रमणकालीन स्थिति उपयोग किए गए ग्रेडिएंट के प्रकार पर निर्भर करती है। सॉफ़्टवेयर डिज़ाइन में आमतौर पर उपयोग किए जाने वाले दो मुख्य प्रकार के ग्रेडिएंट होते हैं: रैखिक और रेडियल।
हालांकि, एक तीसरे प्रकार का ग्रेडिएंट है जो कम लोकप्रिय है और इसे कॉनिक ग्रेडिएंट के रूप में जाना जाता है।
सीएसएस ग्रेडिएंट सिंटैक्स
पृष्ठभूमि-छवि: ढाल-प्रकार (दिशा, रंग1, रंग2);
CSS ग्रेडिएंट को बैकग्राउंड-इमेज CSS प्रॉपर्टी को सौंपा जाना चाहिए। ढाल प्रकार कई में से एक हो सकता है; रैखिक-ढाल, रेडियल-ढाल, या शंकु-ढाल। ग्रेडिएंट प्रकार के बाद ब्रैकेट को खोलना और बंद करना होता है जिसमें ग्रेडिएंट की संक्रमणकालीन दिशा होती है, साथ ही ग्रेडिएंट में शामिल किए जाने वाले रंग भी होते हैं।
सम्बंधित: CSS में बैकग्राउंड इमेज कैसे सेट करें
ऊपर दिया गया उदाहरण दो रंग दिखाता है, लेकिन एक ग्रेडिएंट में कई अलग-अलग रंग हो सकते हैं। केवल आवश्यकता यह है कि सूची में प्रत्येक रंग को अल्पविराम से अलग किया जाता है।
एक रैखिक ढाल क्या है?
रैखिक ढाल सबसे लोकप्रिय सीएसएस ढाल है। यह दो या दो से अधिक रंगों का उपयोग करके एक क्षैतिज, लंबवत, या विकर्ण संक्रमण ढाल बनाता है।
सीएसएस रैखिक ढाल उदाहरणd
पृष्ठभूमि-छवि: रैखिक-ढाल (#00A4CCFF, #F95700FF);
उपरोक्त कोड निम्नलिखित सीएसएस ग्रेडिएंट का उत्पादन करेगा:
ऊपर के उदाहरण से छोड़े गए ग्रेडिएंट सिंटैक्स का एक प्रमुख घटक है। यह घटक ढाल की संक्रमणकालीन दिशा है, और इसे छोड़ दिया गया था क्योंकि रैखिक ढाल का डिफ़ॉल्ट संरेखण लंबवत (ऊपर से नीचे) है; इस उदाहरण में वांछित आउटपुट है।
उपरोक्त कोड कोड की निम्न पंक्ति के समान परिणाम उत्पन्न करता है। दोनों के बीच एकमात्र अंतर कोड के दिशा खंड का है।
बॉटम लीनियर ग्रैडिएंट उदाहरण का उपयोग करना
पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे से, #00A4CCFF, #F95700FF);
जैसा कि आप आउटपुट से देख सकते हैं कि उपरोक्त कोड एक ढाल बनाता है जो शीर्ष पर नीले रंग से शुरू होता है और फिर धीरे-धीरे नीचे नारंगी में संक्रमण करता है। यदि आप रंगों के क्रम को उलटना चाहते हैं तो आप आसानी से बदल सकते हैं नीचे तक साथ से ऊपर के लिए और यह निम्न आउटपुट का उत्पादन करते हुए, ग्रेडिएंट की दिशा को उलट देगा:
ऊर्ध्वाधर संरेखण के समान, एक ढाल के क्षैतिज संरेखण को दिशा कीवर्ड के दो सेटों के उपयोग से प्राप्त किया जा सकता है: बायीं ओर तथा दाहिनी ओर, जो क्रमशः निम्नलिखित आउटपुट का उत्पादन करेगा।
विकर्ण रैखिक ढाल
एक रैखिक ढाल की किसी भी दिशा में एक विकर्ण रैखिक ढाल संक्रमण प्राप्त करना संभव है। कीवर्ड की केवल चार विशिष्ट सूचियां हैं जिन्हें आपको इसे संभव बनाने के लिए जानना आवश्यक है।
- नीचे दाईं ओर
- नीचे बाईं ओर
- ऊपर दाईं ओर
- ऊपर बाईं ओर
विकर्ण रैखिक ढाल उदाहरण का उपयोग करना
पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे दाईं ओर, #00A4CCFF, #F95700FF);
उपरोक्त उदाहरण निम्न आउटपुट उत्पन्न करता है:
जैसा कि आप ऊपर दिए गए आउटपुट से देख सकते हैं, लीनियर ग्रेडिएंट ग्रेडिएंट के ऊपरी बाएँ से नीचे दाएँ भाग की ओर बढ़ते हुए विकर्ण दिशा में अपना संक्रमण बनाता है।
बहुरंगी रैखिक ढाल
एक रैखिक ढाल में दो या दो से अधिक रंग हो सकते हैं, लेकिन एक ढाल में अधिक रंग क्या दिखते हैं? एक बहुरंगी रैखिक ढाल रंग व्यवस्था इसकी दिशा पर निर्भर है। एक क्षैतिज दिशा में संक्रमण करने वालों के पास रैखिक ढाल की सटीक दिशा के आधार पर, प्रत्येक नया रंग रेखीय ढाल के बाईं या दाईं ओर दिखाई देगा।
बहुरंगी रैखिक ढाल उदाहरण
पृष्ठभूमि-छवि: रैखिक-ढाल (दाईं ओर, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:
जैसा कि आप देख सकते हैं कि प्रत्येक नया रंग ढाल के दाईं ओर जोड़ा जाता है, जो अंततः एक इंद्रधनुष में रूपांतरित हो जाता है। एक ही आउटपुट एक ऊर्ध्वाधर दिशा में प्राप्त किया जा सकता है; हालांकि, रैखिक ढाल पर विशिष्ट रंग व्यवस्था लंबवत दिशा कीवर्ड (ऊपर या नीचे) पर निर्भर करेगी।
रेडियल ग्रेडिएंट क्या है?
रेडियल ग्रेडिएंट दो और रंगों का एक सर्पिलिंग ग्रेडिएंट बनाता है जो डिफ़ॉल्ट रूप से केंद्र से शुरू होता है। जहां रैखिक ढाल एक सीधी ढाल उत्पन्न करती है जो लंबवत या क्षैतिज रूप से बहती है, रेडियल ढाल एक गोलाकार ढाल उत्पन्न करती है जो केंद्र से बाहरी किनारों तक बहती है।
रेडियल ग्रेडिएंट उदाहरण का उपयोग करना
पृष्ठभूमि-छवि: रेडियल-ग्रेडिएंट (सर्कल, #00A4CCFF, #F95700FF);
उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:
रेडियल ग्रेडिएंट सेंटर बदलना
डिफ़ॉल्ट रूप से एक रेडियल ग्रेडिएंट ग्रेडिएंट के केंद्र में शुरू होता है; हालांकि, कुछ खोजशब्दों की शुरूआत के साथ मूल स्थान को बदलना संभव है।
रेडियल ग्रेडिएंट प्रारंभ स्थिति उदाहरण बदलना
पृष्ठभूमि-छवि: रेडियल-ग्रेडिएंट (ऊपर दाईं ओर वृत्त, #00A4CCFF, #F95700FF);
उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:
जैसा कि आप ग्रेडिएंट के ऊपर के आउटपुट से देख सकते हैं कि अब केंद्र के बजाय ऊपरी दाएं कोने से शुरू होता है। कीवर्ड के शामिल होने के कारण यह परिवर्तन संभव है ठीक तरह से ऊपर उपरोक्त कोड में। रेडियल ग्रेडिएंट की उत्पत्ति के बिंदु को बदलने के लिए कीवर्ड की निम्नलिखित सूची का भी उपयोग किया जा सकता है:
- बाएं से बाएं
- नीचे दाएं
- तली छोड़ें
बहुरंगी रेडियल ग्रेडियेंट
रैखिक ढाल की तरह, रेडियल ढाल भी दो और रंगों का उपयोग कर सकता है, मुख्य अंतर यह है कि जहां रैखिक ढाल एक सीधी रेखा में ढाल में जोड़ता है, रेडियल ढाल बाहरी पर नए रंग जोड़ता है किनारा।
बहुरंगी रेडियल ग्रेडिएंट उदाहरण
पृष्ठभूमि-छवि: रेडियल-ग्रेडिएंट (सर्कल, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:
ग्रेडिएंट को अनुकूलित करना
अब तक आपने देखा है कि किसी ग्रेडिएंट की दिशा और केंद्र बिंदु को कैसे बदला जाता है, लेकिन आपने यह नहीं देखा कि ग्रेडिएंट को कैसे कस्टमाइज़ किया जाए। ग्रेडिएंट को कस्टमाइज़ करना बहुत काम की तरह लग सकता है, लेकिन एक बार जब आप बनाने की मूल बातें समझ लेते हैं एक सीएसएस पृष्ठभूमि ढाल अगला स्पष्ट कदम यह सीख रहा है कि अपने सीएसएस ग्रेडियेंट को और अधिक कैसे बनाया जाए अद्वितीय।
डिफ़ॉल्ट रूप से, ग्रेडिएंट में रंग समान रूप से वितरित स्थान पर कब्जा कर लेते हैं, प्रत्येक रंग आसानी से इसके बाद एक में परिवर्तित हो जाता है। इसलिए यदि दो रंगों को एक ढाल बनाने के लिए जोड़ा जाता है, तो प्रत्येक रंग एक से दूसरे में संक्रमण करते समय उपलब्ध स्थान के आधे हिस्से पर कब्जा कर लेगा। यदि तीन रंगों को मिला दिया जाए तो प्रत्येक रंग उपलब्ध स्थान के एक तिहाई हिस्से पर कब्जा कर लेगा।
एक अनुकूलित ग्रेडिएंट के साथ, आप स्पष्ट रूप से निर्दिष्ट करके एक ग्रेडिएंट में रंग की जगह की मात्रा को परिभाषित कर सकते हैं रंग-रोकने की स्थिति.
एक रैखिक ढाल को अनुकूलित करना उदाहरण 1
पृष्ठभूमि-छवि: रैखिक-ढाल (दाईं ओर, #00A4CCFF, #F95700FF 30%);
उपरोक्त कोड की पंक्ति निम्न आउटपुट का उत्पादन करेगी:
उपरोक्त आउटपुट रेखीय ग्रेडिएंट में दूसरा रंग दिखाता है जो ग्रेडिएंट में पहले रंग के 30% बिंदु पर रुकता है, इसकी प्रथागत स्थिति के बजाय, और क्योंकि दूसरा रंग भी ढाल में अंतिम रंग है, यह स्वाभाविक रूप से. तक फैलता है समाप्त।
यदि आप पहले रंग के अंत में उपरोक्त कोड में 30% रखना चाहते हैं तो चीजें स्पष्ट हो जानी चाहिए।
एक रैखिक ढाल को अनुकूलित करना उदाहरण 2
पृष्ठभूमि-छवि: रैखिक-ढाल (दाईं ओर, #00A4CCFF 30%, #F95700FF);
उपरोक्त कोड निम्न आउटपुट का उत्पादन करेगा।
उपरोक्त आउटपुट स्पष्ट रूप से ग्रेडिएंट में पहला रंग दिखाता है जो ग्रेडिएंट में दूसरे रंग के 30% बिंदु पर रुकता है। उपरोक्त उदाहरण के साथ यह उदाहरण रंग-रोक अनुकूलन को समझने में आपके लिए आसान बनाने में मदद करेगा।
रेडियल ग्रेडिएंट को कस्टमाइज़ करना उसी तरह से किया जाता है जैसे लीनियर ग्रेडिएंट। रेडियल ग्रेडिएंट में उपरोक्त समान परिणाम प्राप्त करने के लिए केवल एक चीज जो आपको करने की आवश्यकता है, वह है ग्रेडिएंट प्रकार और दिशा को बदलना।
CSS ग्रेडियेंट बनाना कभी आसान नहीं रहा
यह ट्यूटोरियल आलेख आपको रैखिक और रेडियल ग्रेडियेंट को पहचानने और बनाने के लिए टूल प्रदान करता है। यदि आपने इसे इस बिंदु तक पहुंचा दिया है, तो आपने दिशा और ढाल के केंद्र को बदलना सीख लिया है। इसके अतिरिक्त, अब आपके पास CSS ग्रेडिएंट को कस्टमाइज़ करने और अद्वितीय बैकग्राउंड ग्रेडिएंट बनाने का कौशल है।
हालाँकि, यदि आप सीधे नए और अनूठे ग्रेडिएंट बनाने में नहीं जाना चाहते हैं, तो आप कुछ बेहतरीन दिखने वाले पहले से मौजूद ग्रेडिएंट बनाकर शुरू कर सकते हैं।
ठोस रंग तो पिछले साल हैं। ग्रेडिएंट अंदर हैं! लेकिन आप उन्हें CSS में कैसे बनाते हैं?
आगे पढ़िए
- प्रोग्रामिंग
- वेब विकास
- वेब डिजाइन
- सीएसएस
कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।
हमारे न्यूज़लेटर की सदस्यता
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
एक और क़दम…!
कृपया उस ईमेल में अपने ईमेल पते की पुष्टि करें जिसे हमने अभी आपको भेजा है।