Home-theater-designers
यदि आप कुछ मिनटों से अधिक समय से इंटरनेट पर हैं, तो संभावना है कि आप CSS ग्रेडिएंट से परिचित हो गए हैं। CSS बैकग्राउंड प्रॉपर्टी का उपयोग विभिन्न शैलियों की एक श्रृंखला बनाने के लिए किया जा सकता है, और सबसे दिलचस्प प्रकारों में से एक यह है कि यह ग्रेडिएंट वैल्यू के साथ क्या कर सकता है।
किसी भी सॉफ्टवेयर डिजाइनर या डेवलपर के लिए विभिन्न सीएसएस ग्रेडिएंट्स को डिजाइन और बनाने का तरीका जानना एक संपत्ति है। इस लेख से, आप अपनी परियोजनाओं में सीएसएस ग्रेडिएंट्स को शामिल करना शुरू करने के लिए आवश्यक सब कुछ सीखेंगे।
CSS ग्रेडिएंट क्या है?
एक सीएसएस ग्रेडिएंट अनिवार्य रूप से दो या दो से अधिक रंगों का संयोजन है जो आसानी से एक से दूसरे में संक्रमण करता है। CSS ग्रेडिएंट की संक्रमणकालीन स्थिति उपयोग किए गए ग्रेडिएंट के प्रकार पर निर्भर करती है। सॉफ़्टवेयर डिज़ाइन में आमतौर पर उपयोग किए जाने वाले दो मुख्य प्रकार के ग्रेडिएंट होते हैं: रैखिक और रेडियल।
हालांकि, एक तीसरे प्रकार का ग्रेडिएंट है जो कम लोकप्रिय है और इसे कॉनिक ग्रेडिएंट के रूप में जाना जाता है।
सीएसएस ग्रेडिएंट सिंटैक्स
Background-image: gradient-type (direction, color1, color2);
CSS ग्रेडिएंट को बैकग्राउंड-इमेज CSS प्रॉपर्टी को सौंपा जाना चाहिए। ढाल प्रकार कई में से एक हो सकता है; रैखिक-ढाल, रेडियल-ढाल, या शंकु-ढाल। ग्रेडिएंट प्रकार के बाद ब्रैकेट को खोलना और बंद करना होता है जिसमें ग्रेडिएंट की संक्रमणकालीन दिशा होती है, साथ ही ग्रेडिएंट में शामिल किए जाने वाले रंग भी होते हैं।
सम्बंधित: CSS में बैकग्राउंड इमेज कैसे सेट करें
ऊपर दिया गया उदाहरण दो रंग दिखाता है, लेकिन एक ग्रेडिएंट में कई अलग-अलग रंग हो सकते हैं। केवल आवश्यकता यह है कि सूची में प्रत्येक रंग को अल्पविराम से अलग किया जाता है।
एक रैखिक ढाल क्या है?
रैखिक ढाल सबसे लोकप्रिय सीएसएस ढाल है। यह दो या दो से अधिक रंगों का उपयोग करके एक क्षैतिज, लंबवत, या विकर्ण संक्रमण ढाल बनाता है।
सीएसएस रैखिक ढाल उदाहरण
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
उपरोक्त कोड निम्नलिखित सीएसएस ग्रेडिएंट का उत्पादन करेगा:
ऊपर के उदाहरण से छोड़े गए ग्रेडिएंट सिंटैक्स का एक प्रमुख घटक है। यह घटक ढाल की संक्रमणकालीन दिशा है, और इसे छोड़ दिया गया था क्योंकि रैखिक ढाल का डिफ़ॉल्ट संरेखण लंबवत (ऊपर से नीचे) है; इस उदाहरण में वांछित आउटपुट है।
उपरोक्त कोड कोड की निम्न पंक्ति के समान परिणाम उत्पन्न करता है। दोनों के बीच एकमात्र अंतर कोड के दिशा खंड का है।
बॉटम लीनियर ग्रैडिएंट उदाहरण का उपयोग करना
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
जैसा कि आप आउटपुट से देख सकते हैं कि उपरोक्त कोड एक ढाल बनाता है जो शीर्ष पर नीले रंग से शुरू होता है और फिर धीरे-धीरे नीचे नारंगी में संक्रमण करता है। यदि आप रंगों के क्रम को उलटना चाहते हैं तो आप बस को बदल सकते हैं नीचे करने के लिए साथ शीर्ष पर और यह निम्न आउटपुट का उत्पादन करते हुए, ग्रेडिएंट की दिशा को उलट देगा:
ऊर्ध्वाधर संरेखण के समान, एक ढाल के क्षैतिज संरेखण को दिशा कीवर्ड के दो सेटों के उपयोग से प्राप्त किया जा सकता है: बायीं ओर तथा दाहिनी ओर , जो क्रमशः निम्नलिखित आउटपुट का उत्पादन करेगा।
क्या आप ps4 प्रो पर ps3 गेम खेल सकते हैं?
विकर्ण रैखिक ढाल
एक रैखिक ढाल की किसी भी दिशा में एक विकर्ण रैखिक ढाल संक्रमण प्राप्त करना संभव है। कीवर्ड की केवल चार विशिष्ट सूचियां हैं जिन्हें आपको इसे संभव बनाने के लिए जानना आवश्यक है।
- नीचे दाईं ओर
- नीचे बाईं ओर
- ऊपर दाईं ओर
- ऊपर बाईं ओर
विकर्ण रैखिक ढाल उदाहरण का उपयोग करना
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 ग्रेडिएंट को कस्टमाइज़ करने और अद्वितीय बैकग्राउंड ग्रेडिएंट बनाने का कौशल है।
हालाँकि, यदि आप सीधे नए और अनूठे ग्रेडिएंट बनाने में नहीं जाना चाहते हैं, तो आप कुछ बेहतरीन दिखने वाले पहले से मौजूद ग्रेडिएंट बनाकर शुरू कर सकते हैं।
साझा करना साझा करना कलरव ईमेल 27 स्टाइलिश सीएसएस पृष्ठभूमि ढाल उदाहरणठोस रंग तो पिछले साल हैं। ग्रेडिएंट अंदर हैं! लेकिन आप उन्हें CSS में कैसे बनाते हैं?
आगे पढ़िए संबंधित विषय- प्रोग्रामिंग
- वेब विकास
- वेब डिजाइन
- सीएसएस
कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।
कदीशा कीन . की अन्य फ़िल्में-टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें