CSS ग्रेडिएंट जेनरेटर

ग्रेडिएंट इमेज होते हैं, रंग नहीं

CSS ग्रेडिएंट linear-gradient, radial-gradient, या conic-gradient फ़ंक्शन से बनता है, और हर एक एक इमेज मान देता है, रंग नहीं। यह अकेला तथ्य ग्रेडिएंट के अधिकांश व्यवहार को समझा देता है। चूँकि नतीजा एक इमेज है, आप उसे ऐसी प्रॉपर्टी को सौंपते हैं जो इमेज लेती है, सबसे अधिक बार background या background-image, और वह किसी भी दूसरे बैकग्राउंड की तरह टाइल होता है, स्केल होता है, और एक के ऊपर एक चढ़ता है। उसका कोई आंतरिक आकार भी नहीं होता; वह जिस भी बॉक्स में आप उसे रखें उसे भर देता है, यही वजह है कि वही ग्रेडिएंट किसी बटन पर तीखा और किसी हीरो सेक्शन पर कोमल दिख सकता है।

लीनियर ग्रेडिएंट और दिशा

लीनियर ग्रेडिएंट रंगों को एक सीधी धुरी के साथ मिलाता है। उस धुरी को आप या तो किसी कोण से या किसी कीवर्ड दिशा से सेट करते हैं। कोण सीधे ऊपर से घड़ी की दिशा में मापे जाते हैं, इसलिए 0deg नीचे से ऊपर चलता है, 90deg बाएँ से दाएँ चलता है, और 180deg ऊपर से नीचे चलता है। कीवर्ड रूप, जैसे to right या to bottom right, साधारण मामलों के लिए अक्सर ज़्यादा स्पष्ट होते हैं और इनका बोनस यह है कि ये ठीक किसी कोने की ओर इशारा करते हैं, जो बॉक्स का आकार बदलने पर कोई तय कोण नहीं कर पाता।

इस टूल का कोण स्लाइडर आपके लिए डिग्री मान लिख देता है। एक सूक्ष्म सुझाव: जो ग्रेडिएंट हल्के तिरछेपन पर चलता है, कहीं 135deg के आसपास, वह लगभग हमेशा किसी सपाट ऊर्ध्वाधर या क्षैतिज मिश्रण से ज़्यादा परिष्कृत लगता है, क्योंकि आँख तिरछेपन को किसी सतह पर तिरछी पड़ती रोशनी की तरह पढ़ती है।

रेडियल और कॉनिक ग्रेडिएंट

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

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

कलर स्टॉप और स्थितियाँ

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

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

हार्ड स्टॉप: धारियाँ, पट्टियाँ और आकृतियाँ

जब दो सटे हुए कलर स्टॉप एक ही स्थिति साझा करते हैं, तो उनके बीच का संक्रमण शून्य दूरी पर होता है, जिससे किसी मिश्रण की बजाय एक तीखा किनारा बनता है। उस पैटर्न को दोहराएँ और आपको धारियाँ, शतरंज की बिसातें, प्रोग्रेस बार, और रंग-कोडित पट्टियाँ मिलती हैं, सब CSS में बिना किसी इमेज के बनी हुई। उदाहरण के लिए, ऐसा ग्रेडिएंट जो एक रंग को 0 से 50 प्रतिशत तक और दूसरे रंग को 50 से 100 प्रतिशत तक थामे रखता है, आपको बीच में एक साफ़-सुथरा दो-रंगों वाला बँटवारा देता है।

हार्ड स्टॉप को repeating-linear-gradient या repeating-radial-gradient के साथ जोड़ें और पैटर्न अपने आप पूरे बॉक्स पर टाइल हो जाता है, ताकि आप एक ही छोटे डिक्लेरेशन से कैंडी-धारियाँ, तिरछी ख़तरे की टेप, या महीन गाइड-रेखाएँ बना सकें। चूँकि यह किसी बिटमैप की बजाय वेक्टर गणित है, यह किसी भी आकार पर और किसी भी पिक्सेल घनत्व पर उस्तरे जैसी तीखी बनी रहती है।

पारदर्शिता और परतें

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

चूँकि ग्रेडिएंट इमेज होते हैं, background प्रॉपर्टी कॉमा से अलग किए गए कई ग्रेडिएंट स्वीकार करती है, जो आगे से पीछे की ओर रंगे जाते हैं। किसी बेस ग्रेडिएंट के ऊपर एक सूक्ष्म पारदर्शी ग्रेडिएंट चढ़ाना ही वह तरीका है जिससे समृद्ध आधुनिक बैकग्राउंड बिना किसी एक भी इमेज फ़ाइल के बनाए जाते हैं।

सुगम्यता: ग्रेडिएंट के ऊपर टेक्स्ट

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