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

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

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

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

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

डिजाइन में, ग्रेडिएंट दो या दो से अधिक रंगों के बीच संक्रमण होते हैं। ग्रेडिएंट सरल संक्रमण हो सकते हैं, लेकिन इसमें कोण, कई रंग भी शामिल हो सकते हैं, और कई तरह से स्टाइल किए जा सकते हैं।

CSS में दो प्रकार के ग्रेडिएंट समर्थित हैं। य़े हैं:

• रैखिक ग्रेडिएंट
• रेडियल ग्रेडिएंट

रैखिक ग्रेडिएंट ऊपर से नीचे या बाएं से दाएं दो या दो से अधिक रंगों के बीच एक संक्रमण बनाते हैं। रेडियल ग्रेडिएंट रंग संक्रमण होते हैं जो एक मूल बिंदु से निकलते हैं, जैसे कि एक आकृति।

CSS में, ग्रेडिएंट को बैकग्राउंड CSS प्रॉपर्टी का उपयोग करके परिभाषित किया जाता है। इस संपत्ति का उपयोग वेब तत्व के लिए पृष्ठभूमि बनाने के लिए किया जाता है और पृष्ठभूमि-रंग और पृष्ठभूमि-छवि सहित सीएसएस पृष्ठभूमि गुणों के लिए शॉर्टहैंड है।

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

अब हम CSS में ग्रेडिएंट बनाना शुरू करने के लिए तैयार हैं। आइए रैखिक ग्रेडिएंट्स पर चर्चा करके शुरू करें।

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

रैखिक ग्रेडिएंट एक सीधी रेखा के साथ दो या दो से अधिक रंगों के बीच संक्रमण हैं।

उदाहरण के लिए, एक रैखिक ढाल पृष्ठभूमि किसी तत्व के बाएं से दाएं, ऊपर से नीचे, या नीचे बाएं से ऊपरी दाएं कोने में दिखाई दे सकती है। डिफ़ॉल्ट रूप से, ऊपर से नीचे तक एक ग्रेडिएंट दिखाई देगा, लेकिन आप अपने ग्रेडिएंट के लिए एक कस्टम दिशा निर्दिष्ट कर सकते हैं।

लीनियर ग्रेडिएंट्स में कलर स्टॉप होते हैं, जो वे रंग हैं जिन्हें आप अपने ट्रांज़िशन में शामिल करना चाहते हैं। रैखिक ग्रेडिएंट के साथ आप कितने रंग निर्दिष्ट करते हैं इसकी कोई सीमा नहीं है।

यहाँ CSS में एक रेखीय ग्रेडिएंट फ़ंक्शन के लिए सिंटैक्स है:

इस सिंटैक्स में, दिशा ढाल की दिशा का प्रतिनिधित्व करती है, और रंग 1, रंग 2, और इसी तरह हमारे ढाल में रंग रुकने का प्रतिनिधित्व करता है।

आइए CSS में लीनियर ग्रेडिएंट के कुछ उदाहरण देखें।

ऊपर से नीचे का ग्रेडिएंट

मान लीजिए कि हम एक ढाल बनाना चाहते हैं जो एक बॉक्स के ऊपर से नीचे तक दिखाई दे। यह डिफ़ॉल्ट ग्रेडिएंट है जिसे linear-gradient() . के साथ बनाया गया है संपत्ति।

हमारा ग्रेडिएंट #00C9FF (हल्का नीला) रंग से शुरू होना चाहिए, और रंग #92FE9D (हल्का हरा) पर समाप्त होना चाहिए। यहां वह कोड है जिसका उपयोग हम अपना ग्रेडिएंट बनाने के लिए कर सकते हैं:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (#00C9FF, #92FE9D);}

हमारा कोड लौटाता है:

बाएं से दाएं ढाल

दूसरी ओर, हम एक ढाल बनाना चाह सकते हैं जो बाएं से दाएं रंग के संक्रमण को दर्शाता है। हम निम्नलिखित कोड का उपयोग करके ऐसा कर सकते हैं:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (दाईं ओर, #00C9FF, #92FE9D);}

हमारा कोड लौटाता है:

बाएं से दाएं हमारे दो रंगों के बीच हमारा क्रमिक परिवर्तन। यह संक्रमण इसलिए होता है क्योंकि हमने to left specified निर्दिष्ट किया है हमारे ढाल की दिशा के रूप में। वैकल्पिक रूप से, यदि हम चाहते थे कि हमारा ग्रेडिएंट दाएं से बाएं दिखाई दे, तो हम to left . का उपयोग कर सकते थे के बजाय to right हमारे कोड में।

विकर्ण ढाल

आप linear-gradient() . का उपयोग करके विकर्ण ग्रेडिएंट बना सकते हैं एक ढाल के लिए क्षैतिज और ऊर्ध्वाधर प्रारंभिक बिंदु निर्दिष्ट करके संपत्ति।

यदि आप एक ऐसा ग्रेडिएंट बनाना चाहते हैं जो नीचे दाईं ओर संक्रमण करे, तो आप to bottom right निर्दिष्ट करके ऐसा कर सकते हैं। अपने ढाल के रूप में। या यदि आप एक ऐसा ग्रेडिएंट चाहते हैं जो ऊपर बाईं ओर संक्रमण करे, तो आप to top left . का उपयोग कर सकते हैं अपने ढाल के रूप में।

मान लीजिए कि हम एक ग्रेडिएंट बनाना चाहते हैं जो हमारे बॉक्स के ऊपर दाईं ओर संक्रमण करता है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (ऊपर दाईं ओर, #00C9FF, #92FE9D);}

हमारा कोड लौटाता है:

हमारा ग्रेडिएंट नीचे बाईं ओर हल्के नीले रंग से शुरू होता है, फिर बॉक्स के ऊपर दाईं ओर हरे रंग में संक्रमण होता है।

रंग बंद हो जाता है

अब तक, हमारे ग्रेडिएंट्स ने केवल दो रंगों के बीच संक्रमण किया है। हालाँकि, आप दो से अधिक रंग निर्दिष्ट कर सकते हैं यदि आप एक अधिक जटिल ग्रेडिएंट बनाना चाहते हैं जो कई रंगों के बीच संक्रमण करता है।

मान लीजिए कि हम एक ग्रेडिएंट बनाना चाहते हैं जो रंग #00D2FF (हल्का नीला) से #92FE9D (हल्का हरा), #3A47D5 (गहरा नीला) में संक्रमण करता है। यह संक्रमण बाएं से दाएं होना चाहिए। हम इस कोड का उपयोग करके यह ग्रेडिएंट बना सकते हैं:

.gradient {बैकग्राउंड:लीनियर-ग्रेडिएंट(दाईं ओर, #00D2FF, #00C9FF, #3A47D5);}

हमारा कोड लौटाता है:

इस उदाहरण में, हमारा ढाल तीन अलग-अलग रंगों के बीच बाएँ से दाएँ संक्रमण करता है।

कोण

हमारे पिछले उदाहरणों में, हमने अपने ग्रेडिएंट बनाने के लिए पूर्वनिर्धारित दिशाओं (यानी ऊपर दाएं से नीचे बाईं ओर) का उपयोग किया है। यदि हम चाहते हैं कि हमारे ग्रेडिएंट कैसे दिखाई दें, तो हम कस्टम कोणों का उपयोग कर सकते हैं।

कोणों को एक रैखिक ढाल में पहले मान के रूप में निर्दिष्ट किया जाना चाहिए, जहां आप एक दिशा निर्दिष्ट करेंगे।

मान लीजिए आप 120 डिग्री के कोण पर #00C9FF और #92FE9D के बीच एक ट्रांज़िशन बनाना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (120deg, #00C9FF, #92FE9D);}

हमारा कोड लौटाता है:

हमारे उदाहरण में, हमने एक ग्रेडिएंट निर्दिष्ट किया है जो बाएं से दाएं 120 डिग्री के कोण पर नीले और हरे रंग के बीच संक्रमण करता है। उदाहरण के लिए, यदि हम एक ऐसा ग्रेडिएंट बनाना चाहते हैं जो 40 डिग्री के कोण पर संक्रमण करे, तो हम 40deg निर्दिष्ट कर सकते हैं हमारे कोण के रूप में।

पारदर्शी ढाल

RGBA रंगों का उपयोग करके CSS ग्रेडिएंट्स को कमोबेश पारदर्शी बनाया जा सकता है।

RGBA रंग रंग प्रस्तुत करने के लिए RGB (लाल, हरा, नीला) विधि का उपयोग करते हैं। हालांकि, आरजीबीए रंगों में अल्फा नामक एक अतिरिक्त पैरामीटर शामिल होता है जो रंग की पारदर्शिता को परिभाषित करता है। अल्फा पैरामीटर का मान 0 और 1 के बीच होना चाहिए (मान जितना कम होगा, रंग उतना ही अधिक पारदर्शी दिखाई देगा)।

मान लीजिए हम #00C9FF और #92FE9D रंगों के बीच बाएं से दाएं एक ग्रेडिएंट बनाना चाहते हैं। हमारा पहला रंग 50% पारदर्शी से शुरू होना चाहिए, और हमारा अंतिम रंग 30% पारदर्शी होना चाहिए। इस ग्रेडिएंट को बनाने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (दाईं ओर, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));}

हमारा कोड लौटाता है:

यदि हम इसकी तुलना अपने पिछले ग्रेडिएंट से करते हैं, तो हम देख सकते हैं कि हमारे रंग अधिक पारदर्शी हैं। इस उदाहरण में, हमने हेक्स मानों का उपयोग करने के बजाय अपने रंग निर्दिष्ट करने के लिए RGBA मानों का उपयोग किया।

हमने अपने पहले रंग (नीला) के लिए अल्फा मान के रूप में 0.5 निर्दिष्ट किया है, जो रंग को 50% पारदर्शी बनाता है। हमने अपने दूसरे रंग (हरा) के लिए 0.3 को अल्फा मान के रूप में निर्दिष्ट किया है, जो रंग को 70% पारदर्शी बनाता है (याद रखें, अल्फा मान जितना कम होगा, रंग उतना ही अधिक पारदर्शी होगा)।

कठोर रेखाएं

आमतौर पर, जब आप एक ग्रेडिएंट बना रहे होते हैं, तो आप अपने ग्रेडिएंट में रंगों के बीच एक सहज और क्रमिक संक्रमण चाहते हैं। हालाँकि, यदि आप एक ग्रेडिएंट लाइन बनाना चाहते हैं जो दो रंगों को एक ग्रेडिएंट में अलग करती है, तो आप एक हार्ड लाइन निर्दिष्ट करके ऐसा कर सकते हैं।

एक हार्ड लाइन निर्दिष्ट करने के लिए, आपको निम्नलिखित सिंटैक्स का उपयोग करना चाहिए:

रैखिक-ढाल (दिशा, हार्ड-लाइन, रंग);

इसलिए, यदि आप एक हार्ड लाइन चाहते हैं जो एक काले और हरे रंग के ढाल के माध्यम से आधे रास्ते में आती है, तो आप black 50% का उपयोग कर सकते हैं , green 50% एक कठोर रेखा के रूप में। या यदि आप एक कठोर रेखा चाहते हैं जो नीले और गुलाबी ग्रेडिएंट के माध्यम से 70% दिखाई दे, तो आप blue 70% का उपयोग कर सकते हैं , pink 30% एक कठोर रेखा के रूप में।

ग्रेडिएंट में आधे रास्ते पर एक काली हार्ड लाइन के साथ ग्रेडिएंट का एक उदाहरण यहां दिया गया है:

.gradient { बैकग्राउंड:लीनियर-ग्रेडिएंट (दाईं ओर, #00C9FF 50%, #92FE9D 50%);}

हमारा कोड लौटाता है:

इस छवि में आप देख सकते हैं कि, हमारे ढाल के आधे रास्ते में, एक कठिन स्टॉप स्थिति बनाई गई है।

CSS रेडियल ग्रेडिएंट

रेडियल ग्रेडिएंट दो या दो से अधिक रंगों के बीच संक्रमण होते हैं जो एक मूल बिंदु से निकलते हैं। एक रैखिक ढाल के लिए मूल बिंदु या तो एक अंडाकार या एक चक्र है।

एक रेडियल ग्रेडिएंट में कम से कम दो कलर स्टॉप होने चाहिए, और आपके ग्रेडिएंट में कितने कलर स्टॉप हो सकते हैं, इसकी कोई सीमा नहीं है। रेडियल ग्रेडिएंट का सिंटैक्स यहां दिया गया है:

आइए इस वाक्यविन्यास को तोड़ दें:

• आकार रेडियल ऑब्जेक्ट का आकार है (डिफ़ॉल्ट रूप से, यह एक दीर्घवृत्त है)।
• आकार आपके रेडियल ऑब्जेक्ट के आकार का आकार है (डिफ़ॉल्ट रूप से, यह सबसे दूर का कोना है)।
• स्थिति में रेडियल ऑब्जेक्ट की स्थिति है (डिफ़ॉल्ट रूप से, यह केंद्र है)।
• रंग प्रारंभ करें ग्रेडिएंट में पहला रंग है।
• अगले रंग ... प्रारंभ और अंतिम रंगों के बीच के रंग हैं।
• अंतिम रंग ग्रेडिएंट में अंतिम रंग है।

अब हम CSS में रेडियल ग्रेडिएंट बनाने के सिंटैक्स को जानते हैं, हम कुछ उदाहरणों का पता लगा सकते हैं।

डिफ़ॉल्ट रेडियल ग्रेडिएंट

मान लीजिए कि हम एक रेडियल ग्रेडिएंट बनाना चाहते हैं जो #4B6CB7 और #D9E7FF के बीच एक दीर्घवृत्त और संक्रमण है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

.gradient { बैकग्राउंड:radial-gradient(#4B6CB7, #D9E7FF);}

हमारा कोड लौटाता है:

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

विभिन्न कलर स्टॉप

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

मान लीजिए कि हम एक रेडियल ग्रेडिएंट बनाना चाहते हैं जो #4B6CB7 से #D9E7FF से #9198E5 में परिवर्तित हो। पहले रंग में ढाल का 25% हिस्सा होना चाहिए, मध्य रंग का ढाल का 50% होना चाहिए, और अंतिम रंग में ढाल का 25% होना चाहिए।

हम निम्नलिखित कोड का उपयोग करके यह ग्रेडिएंट बना सकते हैं:

.gradient { बैकग्राउंड:radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);}

हमारा कोड लौटाता है:

हमारे कोड में निर्दिष्ट बिंदुओं पर तीन रंगों के बीच हमारा ढाल परिवर्तन। इस प्रभाव को प्राप्त करने के लिए, हमने पहले उस रंग को निर्दिष्ट किया जिसे हम अपने ग्रेडिएंट में शामिल करना चाहते थे, फिर हमने निर्दिष्ट किया कि रंग के लिए कितना ग्रेडिएंट होना चाहिए। इसलिए, उदाहरण के लिए, हमारा मध्य रंग, #D9E7FF, हमारे ढाल का 50% हिस्सा लेता है।

विभिन्न आकार

डिफ़ॉल्ट रूप से, रेडियल ग्रेडिएंट के लिए निर्धारित आकार एक दीर्घवृत्त होता है। हालाँकि, आप अपने ग्रेडिएंट को एक वृत्त भी बना सकते हैं। आप आकार मान circle . निर्दिष्ट करके ऐसा कर सकते हैं अपने ढाल के लिए।

मान लीजिए कि आप एक ग्रेडिएंट बनाना चाहते हैं जो #4B6CB7 और #D9E7FF के बीच संक्रमण करता है। आपके रेडियल ग्रेडिएंट का केंद्र बिंदु एक वृत्त होना चाहिए। आप निम्न कोड का उपयोग करके यह ग्रेडिएंट बना सकते हैं:

.gradient { बैकग्राउंड:रेडियल-ग्रेडिएंट (सर्कल, #4B6CB7, #D9E7FF);}

हमारा कोड लौटाता है:

हमारे उदाहरण में, हमने रंग #4B6CB7 और #D9E7FF के बीच एक रेडियल ग्रेडिएंट बनाया है। हमारे रेडियल ग्रेडिएंट का केंद्रीय बिंदु एक दीर्घवृत्त के बजाय एक वृत्त है।

रेडियल ग्रेडिएंट पोजीशन

रेडियल ग्रेडिएंट की केंद्र वस्तु की स्थिति को बदला जा सकता है। रेडियल ग्रेडिएंट में केंद्रीय वस्तु की स्थिति निर्धारित करने के लिए चार कीवर्ड का उपयोग किया जाता है। य़े हैं:

• निकटतम कोने
• सबसे दूर का कोना
• निकटतम पक्ष
• सबसे दूर की ओर

मान लीजिए कि हम एक गोलाकार रेडियल ग्रेडिएंट बनाना चाहते हैं जो सबसे दूर कोने में 50px 50px की स्थिति में दिखाई दे। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

.gradient { बैकग्राउंड:radial-gradient(50px 50px पर सबसे दूर का गोला, #4B6CB7, #D9E7FF);}

हमारा कोड लौटाता है:

इस उदाहरण में, हमारा रेडियल ग्रेडिएंट सेंटर पॉइंट सबसे दूर कोने में 50px 50px की स्थिति में दिखाई देता है। आप देख सकते हैं कि हमारा केंद्र बिंदु ऊपरी बाएँ कोने में है, जो दर्शाता है कि हमारा ग्रेडिएंट अभीष्ट के अनुसार काम कर रहा है। फिर, हमारा ग्रेडिएंट अगले रंग में बाहर की ओर संक्रमण करता है जिसे हमने अपने कोड में निर्दिष्ट किया है।

निष्कर्ष

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

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