CSS टेक्स्ट-शैडो जनरेटर

इस टेक्स्ट-शैडो जनरेटर का उपयोग कैसे करें

1. ऑफ़सेट सेट करें — शैडो खिसकाने के लिए हॉरिज़ॉन्टल और वर्टिकल स्लाइडर खींचें। एक छोटा नीचे की ओर ऑफ़सेट (जैसे 2 × 2 px) एक स्वाभाविक ड्रॉप शैडो जैसा दिखता है।
2. इसे मुलायम करें — फैली हुई आभा के लिए ब्लर बढ़ाएँ, या अक्षरों की स्पष्ट ऑफ़सेट प्रतिलिपि के लिए इसे 0 कर दें।
3. रंग चुनें — स्वैच पर क्लिक करें और ओपैसिटी घटाएँ ताकि शैडो ठोस काले जैसी दिखने के बजाय बैकग्राउंड पर घुल-मिल जाए।
4. लेयरें चढ़ाएँ — और शैडो जोड़ने के लिए + लेयर जोड़ें पर क्लिक करें। नियॉन ग्लो, 3D अक्षर, लॉन्ग शैडो और आउटलाइन सब बस दो या अधिक लेयरें हैं; सक्रिय लेयर वही है जिसे स्लाइडर संपादित करते हैं।
5. प्रीव्यू संपादित करें — इफ़ेक्ट को संदर्भ में देखने के लिए प्रीव्यू टेक्स्ट, साइज़, वेट, टेक्स्ट रंग और बैकग्राउंड बदलें।
6. CSS कॉपी करें — कॉपी करें पर क्लिक करें और text-shadow नियम को सीधे अपनी स्टाइलशीट में पेस्ट करें।

text-shadow सिंटैक्स संदर्भ

box-shadow के विपरीत, text-shadow में कोई स्प्रेड मान और कोई inset कीवर्ड नहीं होता।

आम text-shadow पैटर्न

• इमेज पर कैप्शन — 0 1px 3px rgba(0,0,0,.6) जैसी मुलायम गहरी शैडो किसी व्यस्त फ़ोटो पर सफ़ेद टेक्स्ट को पढ़ने योग्य रखती है।
• नियॉन साइन — गहरे बैकग्राउंड पर एक ही चमकीले रंग के कई शून्य-ऑफ़सेट शैडो जिनका ब्लर बढ़ता जाता है।
• 3D / उभरे अक्षर — क्रमशः गहरे होते रंगों में नीचे-दाएँ बढ़ते हार्ड 1px शैडो का ढेर।
• लॉन्ग शैडो — फ़्लैट-डिज़ाइन वाले लॉन्ग-शैडो रूप के लिए कई हार्ड शैडो, हर एक 1px और आगे खिसका और पारदर्शिता की ओर फीका होता।
• आउटलाइन टेक्स्ट — चार हार्ड 1px शैडो, हर एक एक तिरछी दिशा में, हर अक्षर के चारों ओर 1px स्ट्रोक बनाते हैं।
• लेटरप्रेस / उकेरा हुआ — सतह से मेल खाती 1px हल्की या गहरी शैडो टेक्स्ट को पृष्ठ में दबा हुआ दिखाती है।

text-shadow के पीछे मानकों की कहानी

text-shadow का इतिहास CSS में सबसे अजीब में से एक है। इसे पहली बार मूल CSS Level 2 Recommendation में 1998 में परिभाषित किया गया, पर जब वर्किंग ग्रुप ने स्पेसिफ़िकेशन को CSS 2.1 में संशोधित किया तो यह प्रॉपर्टी पूरी तरह हटा दी गई (लगभग 2004 के वर्किंग ड्राफ़्ट से यह ग़ायब थी), क्योंकि लगभग किसी भी ब्राउज़र ने इसे एक-सा लागू नहीं किया था। कई वर्षों तक यह केवल काग़ज़ पर ही रही।

यह फ़ीचर लगभग अकेले Apple के Safari ने ज़िंदा रखा, जिसने 2003 (Safari 1.1) से text-shadow का समर्थन किया — कुछ समय तक यही एकमात्र ऐसा ब्राउज़र था। वे शुरुआती संस्करण प्रति तत्व केवल एक अकेली शैडो रेंडर कर सकते थे; कई कॉमा-विभाजित शैडो का समर्थन Safari 4 में आया। बाक़ी इंजन तब आगे आए जब प्रॉपर्टी को आधुनिक CSS Text Decoration Module (Level 3) के हिस्से के रूप में फिर से लाया गया: Opera ने इसे 9.5 में जोड़ा, Firefox ने 3.1/3.5 में, और Chrome ने संस्करण 2 से। 2015 तक हर प्रमुख ब्राउज़र इसका समर्थन करता था, और आज यह एक “Baseline, व्यापक रूप से उपलब्ध” फ़ीचर है जिसे आप बिना किसी प्रीफ़िक्स और बिना किसी फ़ॉलबैक के इस्तेमाल कर सकते हैं।

पुनर्लेखन के साथ एक सूक्ष्म बदलाव आया। Text Decoration मॉड्यूल बताता है कि इसमें परिभाषित पेंटिंग-क्रम 1998 के CSS2 क्रम के उलट है: आधुनिक CSS में कॉमा-विभाजित सूची में पहला शैडो सबसे ऊपर पेंट होता है। जब आप लेयरें चढ़ाते हैं तो यह जनरेटर यही नियम मानता है — सूची में सबसे ऊपर वाली लेयर सामने रहती है।

text-shadow बनाम box-shadow बनाम filter: drop-shadow()

तीन CSS फ़ीचर शैडो डाल सकते हैं, और वे आपस में बदले नहीं जा सकते। text-shadow किसी तत्व के अक्षरों (glyphs) और किसी भी text decoration की शैडो बनाता है। box-shadow आयताकार border box की शैडो बनाता है। drop-shadow() फ़िल्टर फ़ंक्शन तत्व के वास्तविक alpha-channel आकार की शैडो बनाता है, इसलिए यह अक्षरों की रूपरेखा, किसी आइकन, पारदर्शी PNG या SVG को लपेट सकता है।

दो स्पेसिफ़िकेशन विवरण जानने योग्य हैं। पहला, box-shadow के विपरीत, टेक्स्ट शैडो उसे डालने वाले आकार तक सीमित (clipped) नहीं होती: स्पेक कहता है कि टेक्स्ट शैडो “छायांकित आकार तक सीमित नहीं होतीं और यदि टेक्स्ट आंशिक रूप से पारदर्शी है तो झलक सकती हैं।” दूसरा, drop-shadow() पूरे तत्व (और उसके बच्चों) को एक ही मास्क मानता है, इसलिए एक फ़िल्टर पूरे समूह की शैडो एक साथ बना सकता है, जबकि text-shadow हर अक्षर को अलग-अलग आभा देता है। स्पष्ट इंटरफ़ेस टेक्स्ट के लिए text-shadow आमतौर पर तेज़ और सस्ता होता है; किसी लोगो इमेज या अनियमित आकार की शैडो के लिए filter: drop-shadow() का सहारा लें।

ब्लर रेडियस और लंबाई-इकाइयाँ कैसे व्यवहार करती हैं

text-shadow का तीसरा मान ब्लर रेडियस है। यह एक CSS <length> है, इसलिए इसे किसी भी निरपेक्ष या सापेक्ष इकाई में लिखा जा सकता है — px सबसे आम है, पर em और rem ब्लर को फ़ॉन्ट-साइज़ के साथ स्केल करते हैं, जो तब उपयोगी है जब शैडो हर हेडिंग स्तर पर एक-सी दिखनी चाहिए। प्रतिशत की अनुमति नहीं है, और ब्लर रेडियस ऋणात्मक नहीं हो सकता (ऋणात्मक मान पूरी घोषणा को अमान्य बना देता है)। यदि आप ब्लर छोड़ देते हैं, तो यह 0 पर डिफ़ॉल्ट होता है, जो टेक्स्ट की एक कड़े-किनारे वाली प्रतिलिपि देता है।

बड़ा ब्लर रेडियस शैडो के किनारे को अधिक पिक्सलों पर फैला देता है और फीका कर देता है, ठीक किसी इमेज एडिटर के Gaussian blur की तरह: पिक्सल मूल अक्षर से जितना दूर होता है, शैडो का रंग उतना ही पारदर्शिता की ओर घुलता है। यही वजह है कि उसी रंग का बड़ा, मुलायम ग्लो एक कसे हुए ग्लो से फीका दिखता है — वही स्याही अधिक चौड़े क्षेत्र में फैली होती है। ऑफ़सेट और ब्लर स्वतंत्र हैं, इसलिए आप टेक्स्ट से दूर एक तीखी शैडो (बड़ा ऑफ़सेट, शून्य ब्लर) या ठीक उसके पीछे बैठी मुलायम आभा (शून्य ऑफ़सेट, बड़ा ब्लर) रख सकते हैं, जो नियॉन इफ़ेक्ट का आधार है।

चूँकि रंग वैकल्पिक है और ऑफ़सेट से पहले या बाद में लिखा जा सकता है, ये सभी मान्य हैं: 2px 2px 4px black, black 2px 2px 4px, और 5px 5px #558abb (बिना ब्लर)। जब आपको ऐसा रंग चाहिए जिसके पार देखा जा सके, तो rgba() मान या #00000059 जैसा 8-अंकों वाला hex इस्तेमाल करें ताकि बैकग्राउंड ठोस रंग के ब्लॉक के पीछे छिपने के बजाय शैडो के आर-पार झलके।

चढ़ी हुई शैडो के इफ़ेक्ट के पीछे का गणित

हर “फ़ैंसी” टेक्स्ट इफ़ेक्ट बस दो या अधिक साधारण शैडो को जोड़ना है। पैटर्न जानने से आप एक हाथ से बना सकते हैं या किसी प्रीसेट को बारीकी से ट्यून कर सकते हैं:

• आउटलाइन / स्ट्रोक। एक ही रंग के चार हार्ड (blur 0) शैडो रखें, हर एक एक पिक्सल तिरछी दिशा में: -1px -1px 0, 1px -1px 0, -1px 1px 0 और 1px 1px 0। मिलकर वे हर अक्षर को 1px सीमा से घेर देते हैं। 2px आउटलाइन के लिए, सेट को ±2px पर दोहराएँ और अक्सर एक चिकनी सीमा के लिए चार सीधी दिशाएँ भी जोड़ें।
• 3D / उभरा हुआ। हार्ड शैडो की एक शृंखला को तिरछे खिसकाएँ, हर बार एक पिक्सल और आगे, और हल्के से गहरे की ओर फीका होते हुए: 1px 1px 0, 2px 2px 0, 3px 3px 0, इत्यादि। प्रतिलिपियों की अटूट सीढ़ी ठोस गहराई जैसी पढ़ी जाती है।
• लॉन्ग शैडो। फ़्लैट-डिज़ाइन वाली “लॉन्ग शैडो” वही विचार है जिसे एक दर्जन या अधिक क़दमों तक बढ़ाया गया, हर एक एक पिक्सल और आगे खिसका और थोड़ा और पारदर्शी, ताकि लकीर बैकग्राउंड में फीकी पड़ जाए।
• नियॉन ग्लो। एक ही चमकीले रंग के कई शून्य-ऑफ़सेट शैडो बढ़ते ब्लर के साथ चढ़ाएँ — जैसे ब्लर 6, 14 और 28। कसी हुई भीतरी प्रतिलिपियाँ अक्षरों को पठनीय रखती हैं जबकि चौड़ी बाहरी प्रतिलिपियाँ आभा में खिल जाती हैं। यह गहरे बैकग्राउंड पर हल्के टेक्स्ट के रूप में सबसे अच्छा लगता है।
• लेटरप्रेस / उकेरा हुआ। प्रकाश से मेल खाती एक अकेली 1px शैडो — हल्की सतह पर टेक्स्ट के ठीक नीचे एक हल्की सफ़ेद शैडो, या ठीक उसके ऊपर एक गहरी — अक्षरों के पृष्ठ में दबे होने का आभास पैदा करती है।

क्रम मायने रखता है क्योंकि पहला शैडो सबसे ऊपर पेंट होता है: किसी 3D या लॉन्ग-शैडो ढेर में आप सबसे नज़दीकी, सबसे हल्की प्रतिलिपि पहले सूचीबद्ध करते हैं ताकि गहरी, दूर की प्रतिलिपियाँ उसके पीछे बैठें।

पठनीयता, कंट्रास्ट और सुलभता

शैडो बदलती है कि टेक्स्ट कैसा दिखता है, पर सुलभता नियम फिर भी उसके पीछे के बैकग्राउंड के सापेक्ष टेक्स्ट भराव (fill) को ही आँकते हैं। WCAG की कंट्रास्ट आवश्यकता (सफलता मानदंड 1.4.3) सामान्य बॉडी टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट (लगभग 24px, या 18.66px बोल्ड) के लिए 3:1 अनुपात माँगती है। एक text-shadow उस अनुपात में नहीं गिनी जाती, इसलिए आप शैडो जोड़कर सफ़ेद पर हल्के स्लेटी टेक्स्ट को नहीं बचा सकते — अंतर्निहित रंग पहले से ही पास होने चाहिए।

शैडो जो कर सकती है वह है किसी व्यस्त या अप्रत्याशित बैकग्राउंड, जैसे हीरो फ़ोटो, पर टेक्स्ट को पढ़ने योग्य रखना। 0 1px 3px rgba(0,0,0,.6) जैसी मुलायम गहरी शैडो सफ़ेद कैप्शन को एक समान गहरा किनारा देती है ताकि इमेज जहाँ भी हल्की हो, वे पढ़ने योग्य बने रहें। इस तरह इस्तेमाल की गई शैडो एक पठनीयता सहायक है, सजावट नहीं। पर छोटे बॉडी टेक्स्ट पर इसे संयमित रखें: गहरी या धुँधली शैडो अक्षरों को मोटा और गँदला कर देती है और अनुच्छेदों को पढ़ना कठिन बना देती है, आसान नहीं।

दो और आदतें रखने योग्य: कभी भी अर्थ को केवल किसी शैडो में न बाँधें (एक ग्लो जो सक्रिय टैब को चिह्नित करता है, उन सबको बाहर कर देता है जो उसे नहीं देख सकते), और यदि आप किसी ग्लो को एनिमेट करते हैं तो prefers-reduced-motion मीडिया क्वेरी का सम्मान करें ताकि जो लोग गति के प्रति संवेदनशील हैं वे धड़कते इफ़ेक्ट से बाहर निकल सकें।

परफ़ॉर्मेंस और पेंट लागत

सामान्य हेडिंग, लोगो और कैप्शन के लिए text-shadow सस्ती है: ब्राउज़र प्रति लेयर टेक्स्ट को एक बार और, ऑफ़सेट और ब्लर के साथ पेंट करता है, और बस। कोई लेआउट या रीफ़्लो लागत नहीं है, और एक स्थिर शैडो का किसी पृष्ठ के Core Web Vitals पर कोई मापने योग्य प्रभाव नहीं होता।

लागत केवल चरम पर दिखती है। ब्लर की लागत मोटे तौर पर उसके ढके क्षेत्र के अनुपात में होती है, इसलिए एक अकेला बहुत बड़ा ग्लो (मान लें 80–100px) एक कसी हुई 4px शैडो से कहीं अधिक काम करता है, और कई लेयरें चढ़ाना उस काम को गुणा कर देता है — बीस हार्ड प्रतिलिपियों से बना एक लॉन्ग-शैडो इफ़ेक्ट टेक्स्ट को बीस बार फिर से पेंट करता है। यह किसी जमी हुई हेडिंग के लिए मायने नहीं रखता, पर यदि आप एक साथ कई तत्वों पर किसी बड़े, बहु-लेयर ग्लो के ब्लर या रंग को एनिमेट करते हैं तो यह मायने रखता है, जो ब्राउज़र को हर फ़्रेम पर टेक्स्ट को फिर से रास्टराइज़ करने पर मजबूर करता है और कम-क्षमता वाले डिवाइसों पर फ़्रेम-रेट गिरा सकता है।

व्यावहारिक सलाह: कम संख्या में लेयरें रखें, ब्लर रेडियस मामूली रखें जब तक इफ़ेक्ट को सचमुच अधिक की ज़रूरत न हो, और यदि आपको किसी ग्लो को एनिमेट करना ही है, तो ब्लर रेडियस के बजाय किसी अकेली पहले से रेंडर की शैडो पर opacity एनिमेट करें, और इसे मुट्ठी भर तत्वों तक सीमित रखें। किसी इमेज या अनियमित आकार के चारों ओर मुलायम शैडो के लिए filter: drop-shadow() GPU-त्वरित हो सकता है और अक्सर चढ़ी हुई टेक्स्ट शैडो से इसकी नक़ल करने से बेहतर प्रदर्शन करता है।

आम ग़लतियाँ (और उनके समाधान)

• रंग भूल जाना। यदि आप रंग छोड़ देते हैं, तो स्पेक इसे ब्राउज़र पर छोड़ देता है (यह आमतौर पर तत्व के अपने टेक्स्ट रंग पर फ़ॉलबैक करता है), इसलिए परिणाम ब्राउज़रों के बीच भिन्न हो सकता है। पूर्वानुमेय आउटपुट के लिए रंग स्पष्ट रूप से बताएँ।
• हर चीज़ के लिए ठोस काला इस्तेमाल करना। असली शैडो बैकग्राउंड को झलकने देती है। सपाट #000 अक्सर अक्षरों की कड़ी फ़ोटोकॉपी जैसा दिखता है, जबकि rgba(0,0,0,.35) किसी भी सतह पर कहीं अधिक स्वाभाविक रूप से घुलता है।
• छोटे टेक्स्ट को ज़्यादा ब्लर करना। 14px बॉडी टेक्स्ट पर बड़ा ब्लर अक्षरों को गँदला कर देता है और पठनीयता को नुक़सान पहुँचाता है। बड़े, मुलायम ग्लो को बड़ी हेडिंग के लिए बचाकर रखें और बॉडी-टेक्स्ट शैडो को कसा और सूक्ष्म रखें।
• स्प्रेड या inset की उम्मीद करना। वे box-shadow के हैं। text-shadow में इनमें से कोई नहीं है, इसलिए आउटलाइन को चार ऑफ़सेट शैडो से नक़ली बनाना पड़ता है, और कोई inset या inner-glow कीवर्ड नहीं है जिसका सहारा लिया जाए।
• लेयरों को ग़लत क्रम में सूचीबद्ध करना। चूँकि पहला शैडो सबसे ऊपर पेंट होता है, पीछे-से-आगे लिखा गया कोई 3D या नियॉन ढेर अपनी ही चमकीली भीतरी लेयर को दबा देगा। सबसे नज़दीकी, सबसे तीखी प्रतिलिपि पहले सूचीबद्ध करें।
• ब्लर रेडियस को एनिमेट करना। किसी बड़े ग्लो के ब्लर को सुचारू रूप से एनिमेट करना एक पेंट-भारी संचालन है; इसके बजाय एक सुचारू, सस्ते परिणाम के लिए किसी पहले से बनी शैडो की opacity को क्रॉस-फ़ेड करें।

अक्सर पूछे जाने वाले सवाल