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

बिना किसी डिज़ाइन टूल के शानदार सीएसएस ग्रेडिएंट बनाएं

किसी वेबसाइट में दृश्य गहराई और आधुनिक सौंदर्यशास्त्र जोड़ने के लिए ग्रेडिएंट सबसे प्रभावी तरीकों में से एक है। सीएसएस ग्रेडिएंट्स के लिए किसी छवि फ़ाइल की आवश्यकता नहीं होती है और वे तुरंत लोड होते हैं क्योंकि वे ब्राउज़र द्वारा उत्पन्न होते हैं। यह जनरेटर आपको रंगों को चुनकर और कोण को समायोजित करके एक ढाल को दृश्य रूप से डिज़ाइन करने देता है, फिर सटीक सीएसएस कोड की प्रतिलिपि बनाता है जिसे आपको इसका उपयोग करने की आवश्यकता होती है।

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

रैखिक ग्रेडिएंट एक रंग से दूसरे रंग में एक सीधी रेखा में संक्रमण करते हैं। कोण दिशा निर्धारित करता है: 0° नीचे से ऊपर जाता है, 90° बाएँ से दाएँ जाता है, 180° ऊपर से नीचे जाता है, और 270° दाएँ से बाएँ जाता है। डिज़ाइन के लिए सबसे सामान्य कोण 135° (विकर्ण) और 90° (क्षैतिज) हैं। 0° और 360° के बीच का कोई भी कोण मान्य है।

सीएसएस: रैखिक-ढाल(135डिग्री, #667ईईए, #764बीए2)

रेडियल ग्रेडिएंट्स एक केंद्र बिंदु से गोलाकार या अण्डाकार आकार में बाहर की ओर निकलते हैं। वे स्पॉटलाइट प्रभाव, बटन होवर स्थिति और केंद्रित फोकल तत्वों के लिए उपयोगी हैं।

सीएसएस: रेडियल-ग्रेडिएंट (सर्कल, #667ईईए, #764बीए2)

प्रत्येक आधुनिक ब्राउज़र में ग्रेडिएंट के लिए समर्थन

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

अधिक रंग जोड़ना बंद हो जाता है

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

रैखिक-ढाल(135डिग्री, #667ईईए 0%, #एफएफ6बी6बी 50%, #764बीए2 100%)

आप यह नियंत्रित करने के लिए कि संक्रमण कहाँ होता है, विशिष्ट प्रतिशत पर स्टॉप भी निर्दिष्ट कर सकते हैं:

रैखिक-ढाल(90डिग्री, #000000 0%, #000000 50%, #ff0000 50%, #ff0000 100%)

यह ग्रेडिएंट के बजाय एक तीव्र विभाजन बनाता है - जो कुछ डिज़ाइन प्रभावों के लिए उपयोगी है।

लोकप्रिय ग्रेडिएंट पैलेट

कुछ पसंदीदा ग्रेडिएंट संयोजन:

• महासागर: #2193b0 → #6dd5ed
• सूर्यास्त: #FF512F → #DD2476
• वन: #134ई5ई → #71बी280
• बैंगनी सपना: #667ईए → #764बीए2
• आग: #f7971e → #ffd200
• रात का आसमान: #0f0c29 → #302b63 → #24243e

सीएसएस में ग्रेडियेंट का उपयोग करना

बैकग्राउंड शॉर्टहैंड प्रॉपर्टी या बैकग्राउंड-इमेज प्रॉपर्टी सीधे ग्रेडिएंट फ़ंक्शंस को स्वीकार करती है:

.हेडर {

पृष्ठभूमि: रैखिक-ढाल(135डिग्री, #667ईईए, #764बीए2);

}

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

छवियों के साथ ग्रेडियेंट का संयोजन

सीएसएस एकाधिक पृष्ठभूमि परतों का उपयोग करके पृष्ठभूमि छवि के साथ एक ग्रेडिएंट को संयोजित करने की अनुमति देता है:

.हीरो {

पृष्ठभूमि: रैखिक-ढाल(आरजीबीए(0,0,0,0.5), आरजीबीए(0,0,0,0.5)), यूआरएल('फोटो.जेपीजी') केंद्र/कवर;

}

यह एक छवि पर एक अर्ध-पारदर्शी अंधेरे ढाल को ओवरले करता है, जिससे नायक अनुभागों पर पाठ पठनीयता में सुधार होता है।

जनरेटर का उपयोग कैसे करें

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

सीएसएस ग्रेडिएंट्स इमेज ग्रेडिएंट्स को मात क्यों देते हैं?

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

ऐसे रंग चुनना जो एक साथ अच्छे से मेल खाते हों

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

पाठ और अन्य तत्वों पर ग्रेडियेंट

सादे पृष्ठभूमि से परे, ग्रेडिएंट्स को background-clip: text और एक पारदर्शी टेक्स्ट रंग के संयोजन का उपयोग करके टेक्स्ट पर ही लागू किया जा सकता है, जो शीर्षकों और लोगो के लिए एक लोकप्रिय प्रभाव है जो एक छवि फ़ाइल का सहारा लिए बिना एक रंगीन, आंख को पकड़ने वाला उपचार चाहते हैं। The same underlying gradient syntax also works on borders and can be combined with CSS masks for more advanced shape effects, though these techniques require a little more supporting CSS than a plain background gradient does. एक बार जब आपको इस जनरेटर से अपनी पसंद का ग्रेडिएंट मिल जाता है, तो यह जानने लायक है कि एक ही रंग के स्टॉप को एक दृश्यमान सुसंगत डिजाइन के लिए इन विभिन्न प्रभावों में पुन: उपयोग किया जा सकता है।

निजी और तत्काल

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