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

इस box-shadow जनरेटर का उपयोग कैसे करें

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

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

सामान्य box-shadow पैटर्न

• कार्ड और पैनल — 0 4px 12px rgba(0,0,0,.12) जैसी एक मुलायम कम-अपारदर्शिता वाली शैडो किसी कार्ड को पेज से उठा देती है।
• मटेरियल एलिवेशन — दो स्टैक की गई शैडो (संपर्क किनारे के लिए एक तंग और एक चौड़ी ऐम्बिएंट शैडो) Google के एलिवेशन स्तरों की नक़ल करती हैं।
• बटन और होवर — एक छोटी विश्राम-अवस्था की शैडो जो :hover पर बढ़ती है एक स्पर्शनीय उठान देती है; दबे हुए एहसास के लिए इसे :active पर सिकोड़ें।
• न्यूमॉर्फिज़्म / सॉफ़्ट UI — एक ओर एक गहरी शैडो और विपरीत ओर एक हल्की शैडो किसी एलिमेंट को उसकी पृष्ठभूमि से उभरा हुआ दिखाती हैं।
• इनसेट फ़ील्ड और वेल — एक इनसेट शैडो इनपुट और प्रगति-ट्रैक को धँसा हुआ दिखाती है।
• ग्लो और फ़ोकस रिंग — स्प्रेड के साथ एक शून्य-ऑफ़सेट रंगीन शैडो एक ग्लो या एक सुलभ फ़ोकस आउटलाइन बनाती है।

हर box-shadow मान, समझा हुआ

box-shadow को CSS Backgrounds and Borders Module Level 3 में परिभाषित किया गया है — वही विनिर्देश जो हमें border-radius और कई पृष्ठभूमियाँ देता है। इसका औपचारिक व्याकरण संक्षिप्त दिखता है — [inset?] && [<length>{2,4}] && <color>? — पर वह संकेतन एक सटीक नियम छुपाता है जिसे याद रखना उपयोगी है: लंबाई (length) मान स्थिति-निर्भर हैं, पर inset और रंग नहीं। जब भी लंबाइयाँ आती हैं, पहली दो हमेशा क्षैतिज और लंबवत ऑफ़सेट होती हैं, तीसरा मान (यदि मौजूद हो) ब्लर रेडियस है, और चौथा स्प्रेड रेडियस है। inset कीवर्ड और रंग उन लंबाइयों की उस श्रृंखला से पहले या बाद में बैठ सकते हैं, यही वजह है कि inset 0 2px 6px #000 और #000 0 2px 6px inset दोनों मान्य और एक समान हैं। परंपरा से लेखक inset पहले और रंग आख़िर में लिखते हैं, क्योंकि यह स्वाभाविक पढ़ा जाता है और अधिकांश जनरेटर (यह भी) जो आउटपुट देते हैं उससे मेल खाता है।

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

ब्राउज़र समर्थन अब चिंता की बात नहीं है। 2000 के दशक के अंत में box-shadow वेंडर प्रीफ़िक्स के पीछे आई — Safari और शुरुआती Chrome बिल्ड के लिए -webkit-box-shadow, संस्करण 4 से पहले के Firefox के लिए -moz-box-shadow — जबकि सिंटैक्स अभी अंतिम रूप ले रहा था। Firefox 4 ने 2011 में अपना प्रीफ़िक्स हटा दिया और Internet Explorer 9 ने उसी साल सादा, बिना-प्रीफ़िक्स प्रॉपर्टी भेजी, इसलिए एक दशक से ज़्यादा से हर बड़ा ब्राउज़र मानक box-shadow समझता है। आप उत्पादन CSS से किसी भी -webkit- या -moz- शैडो पंक्तियों को सुरक्षित रूप से हटा सकते हैं।

ब्लर बनाम स्प्रेड — हर एक असल में क्या करता है

ब्लर और स्प्रेड को आपस में गड़बड़ा देना आसान है क्योंकि दोनों शैडो को "बड़ा" बनाते हैं, पर वे पूरी तरह अलग तरीक़ों से काम करते हैं। स्प्रेड किसी भी ब्लरिंग से पहले शैडो आकार का आकार बदलता है। एक धनात्मक स्प्रेड शैडो को हर दिशा में बाहर की ओर फुलाता है (4px का स्प्रेड शैडो को एलिमेंट से 8 px चौड़ा और 8 px ऊँचा बना देता है); एक ऋणात्मक स्प्रेड इसे पिचकाता है, जो एक ऐसी शैडो के लिए क्लासिक तरकीब है जो केवल एक ओर झाँकती है — एक नीचे की ओर ऑफ़सेट को एक ऋणात्मक स्प्रेड के साथ जोड़ें ताकि ऊपर और किनारे एलिमेंट के नीचे दब जाएँ।

ब्लर नियंत्रित करता है कि वह किनारा कितना मुलायम है। विनिर्देश ब्राउज़र से एक गॉसियन ब्लर का अनुमान लगाने को कहता है जिसका मानक विचलन (standard deviation) आपके लिखे ब्लर-रेडियस का आधा हो, और हर पिक्सेल को आदर्श मान के लगभग 5% के भीतर रखने को कहता है। 0 का ब्लर एक पूरी तरह तीखा किनारा बनाता है; बड़े अंक उतनी ही "स्याही" को एक चौड़ी, मंद पट्टी पर फैलाते हैं, इसलिए बड़ी शैडो एक ही रंग पर भी स्वाभाविक रूप से हल्की दिखती हैं। चूँकि आपकी दी गई लंबाई मानक विचलन की दुगुनी है, वही अंक अन्य CSS विशेषताओं में अलग व्यवहार करता है: filter: blur() में या किसी SVG feGaussianBlur में एक मान स्वयं मानक विचलन होता है, इसलिए blur(10px) किसी box-shadow की 10px ब्लर रेडियस वाली झालर से स्पष्ट रूप से मुलायम होता है।

ऐतिहासिक रूप से ब्राउज़र सटीक एल्गोरिथ्म पर असहमत थे — पुराना Chrome एक तेज़ बॉक्स-ब्लर इस्तेमाल करता था जो सूक्ष्म रूप से चौकोर कोने छोड़ देता था, जबकि Firefox एक सच्चा गॉसियन इस्तेमाल करता था — पर एक बार जब विनिर्देश ने ब्लर को "रेडियस के आधे" पर बाँध दिया तो वे एक जैसे हो गए, और आज इंजनों के बीच का फ़र्क व्यवहार में देखने योग्य नहीं है। डिज़ाइनरों के लिए निचोड़: किसी शैडो को फैला हुआ और दूर महसूस कराने के लिए ब्लर की ओर जाएँ, और यह कितनी मुलायम है उससे स्वतंत्र रूप से इसकी जगह नियंत्रित करने के लिए स्प्रेड की ओर जाएँ।

यथार्थ गहराई के लिए कई शैडो को लेयर करना

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

Google के Material Design ने इस विचार को दो-प्रकाश मॉडल से औपचारिक बनाया। यह हर सतह को काग़ज़ की एक शीट के रूप में कल्पित करता है जो एक तीखे की-लाइट (key light) और एक मुलायम, सर्वदिशीय ऐम्बिएंट लाइट (ambient light) से प्रकाशित है। की-लाइट एक छोटी, अपेक्षाकृत गहरी शैडो डालती है जो एलिमेंट के ठीक नीचे तीखे संपर्क किनारे को परिभाषित करती है; ऐम्बिएंट लाइट एक बड़ी, कहीं हल्की शैडो डालती है जो बाहर की ओर फैलती है। इसलिए एक असली एलिवेशन शैडो एक साथ दो स्टैक की गई शैडो होती है, यही ठीक कारण है कि इस जनरेटर के Material प्रीसेट एक अकेली पंक्ति के बजाय दो लेयर की जोड़ी के रूप में आते हैं।

स्वाभाविक गहराई के लिए एक भरोसेमंद विधि यह है कि तीन या अधिक लेयर इस्तेमाल करें जो आगे बढ़ते हुए ब्लर में दुगुनी होती जाएँ: कुछ इस तरह — 0 1px 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.06)। हर अगली लेयर चौड़ी और मंद है, इसलिए शैडो एक तीखी संपर्क-रेखा से एक मुलायम ऐम्बिएंट धुंध में सहजता से बढ़ती है — वही प्रभाव जो आपको एक ठीक से मॉडल की गई एरिया लाइट से मिलता, जिसे चार CSS मानों से सस्ते में अनुमानित किया गया है। अपने स्वयं के स्टैक बनाने के लिए ऊपर + लेयर जोड़ें पर क्लिक करें।

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

CSS शैडो डालने का एक दूसरा तरीका देता है — filter प्रॉपर्टी के अंदर इस्तेमाल किया जाने वाला drop-shadow() फ़ंक्शन — और दोनों आपस में बदले नहीं जा सकते। निर्णायक अंतर यह है कि शैडो किसका अनुसरण करती है। box-shadow हमेशा एलिमेंट के आयताकार बॉर्डर बॉक्स का पता लगाती है (किसी भी border-radius का सम्मान करते हुए), चाहे उसके अंदर कुछ भी बना हो। filter: drop-shadow() इसके बजाय एलिमेंट के असली बने हुए आकार का — उसके अल्फ़ा चैनल का — पता लगाती है, इसलिए यह किसी पारदर्शी PNG, किसी SVG आइकन, किसी क्लिप किए गए आकार या टेक्स्ट के दिखने वाले पिक्सेलों के चारों ओर लिपटती है, ख़ाली कोनों को अनदेखा करते हुए।

वह एक अंतर ही चुनाव तय करता है। एक पारदर्शी PNG के रूप में सहेजे गए लोगो को box-shadow से एक भद्दा आयताकार प्रभामंडल मिलता है पर drop-shadow() से एक तंग, आकार-से-लिपटी शैडो। बदले में, drop-shadow() जानबूझकर एक छोटी विशेषता है: इसमें कोई स्प्रेड मान नहीं और कोई इनसेट नहीं है, और यह केवल offset-x, offset-y, एक वैकल्पिक ब्लर और एक रंग स्वीकार करती है। आप फिर भी फ़ंक्शन शृंखलित करके इसे लेयर कर सकते हैं — filter: drop-shadow(...) drop-shadow(...) — और चूँकि यह एक फ़िल्टर है, यह किसी समूह के हर बच्चे को एक संयुक्त छायाचित्र के रूप में भी शैडो देती है, जो box-shadow नहीं कर सकती।

इनसेट शैडो, न्यूमॉर्फिज़्म और एलिवेशन

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

न्यूमॉर्फिज़्म ("new" और "skeuomorphism" का मेल) इसे और आगे ले जाता है, एक ही एलिमेंट पर विपरीत शैडो मिलाकर। अपनी पृष्ठभूमि से उभरे हुए एलिमेंट को प्रकाश से दूर वाली ओर एक गहरी शैडो और उसकी ओर वाली ओर एक हल्की, लगभग-सफ़ेद शैडो मिलती है — आमतौर पर एक गहरे रंग में 8px 8px 16px और सफ़ेद में -8px -8px 16px। दोनों लेयर को inset पर स्विच करें और वही एलिमेंट सतह के अंदर धकेला हुआ दिखता है। यह प्रभाव तभी काम करता है जब एलिमेंट और उसकी पृष्ठभूमि एक रंग साझा करें, यही वजह है कि न्यूमॉर्फिक UI मुलायम स्लेटी कैनवस पर रहते हैं।

मटेरियल एलिवेशन शैडो को एक शाब्दिक निर्देशांक के रूप में इस्तेमाल करता है। हर सतह की एक ऊँचाई dp (घनत्व-स्वतंत्र पिक्सेल) में मापी जाती है, और वह z-ऊँचाई केवल उसकी शैडो से संप्रेषित होती है: एक विश्राम-अवस्था का कार्ड 1 dp पर एक बमुश्किल दिखने वाली शैडो के साथ बैठ सकता है, जबकि एक फ़्लोटिंग ऐक्शन बटन या एक खुला मेनू 6–8 dp तक उठकर एक स्पष्ट रूप से बड़ी, मुलायम छाया के साथ आता है। होवर या फ़ोकस पर एलिवेशन बढ़ाना ही वह तरीका है जिससे Material संकेत देता है कि कोई चीज़ इंटरैक्टिव है या उठा ली गई है — शैडो स्थानिक जानकारी एन्कोड कर रही है, केवल सजावट नहीं।

प्रदर्शन: शैडो को समझदारी से एनिमेट करें

एक स्थिर box-shadow सस्ती है, पर किसी को एनिमेट करना नहीं। किसी शैडो के ब्लर, स्प्रेड या रंग को बदलना ब्राउज़र को हर एक फ़्रेम पर एलिमेंट को फिर से रंगने पर मजबूर करता है, और किसी फ़ोन पर यह एक स्मूद होवर ट्रांज़िशन को हकलाहट में गिरा सकता है। केवल दो प्रॉपर्टी बिना लेआउट या पेंट ट्रिगर किए एनिमेट की जा सकती हैं — opacity और transform — क्योंकि कम्पोज़िटर उन्हें GPU पर संभाल सकता है। इसलिए Tobias Ahlin द्वारा प्रचलित प्रदर्शनकारी पैटर्न यह है कि शैडो को बिल्कुल एनिमेट न करें।

इसके बजाय, एलिमेंट को किसी स्यूडो-एलिमेंट पर एक बड़ी "लक्ष्य" शैडो दें और उसी को फ़ेड-इन करें। अपनी विश्राम-अवस्था की शैडो एलिमेंट पर सामान्य रूप से लगाएँ, इसके ::after स्यूडो-एलिमेंट पर opacity: 0 के साथ एक मज़बूत शैडो जोड़ें, स्यूडो-एलिमेंट को ठीक-ठीक ओवरलैप करने के लिए स्थित करें, और :hover पर केवल इसकी opacity ट्रांज़िशन करें। शैडो बढ़ती और मुलायम होती हुई दिखती है, पर ब्राउज़र केवल दो पहले-से-रंगी हुई लेयर को क्रॉस-फ़ेड कर रहा है — ऐसा काम जिसे वह 60 fps पर कम्पोज़िट कर सकता है। यदि आपको वाक़ई किसी असली box-shadow को एनिमेट करना ही हो, तो will-change संयम से जोड़ें (यह एक कम्पोज़िटिंग लेयर आरक्षित करता है और इसका ज़्यादा इस्तेमाल मेमोरी बर्बाद करता है) और एनिमेशन समाप्त होते ही इसे हटा दें।

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

UI डिज़ाइन में शैडो का एक संक्षिप्त इतिहास

जैसे-जैसे डिजिटल इंटरफ़ेस परिपक्व हुए, शैडो फ़ैशन में आती-जाती रहीं। 2000 के दशक के अंत और 2010 के दशक के शुरुआत में स्क्यूओमॉर्फिज़्म (skeuomorphism) का राज था: बटनों में चमकदार बेवल, चमड़े की बनावट और भारी ड्रॉप शैडो होती थीं जो भौतिक वस्तुओं की नक़ल करने के लिए बनाई जाती थीं ताकि टचस्क्रीन में नए उपयोगकर्ता जान सकें कि क्या टैप करने योग्य है। Apple का शुरुआती iOS इसका सबसे बड़ा उदाहरण था।

यह 2013 में तेज़ी से पलटा, जब Apple ने iOS 7 भेजा और फ़्लैट डिज़ाइन (flat design) की शुरुआत की — साफ़ ज्यामिति, चटख रंग और लगभग कोई शैडो या गहराई नहीं। फ़्लैट डिज़ाइन साफ़-सुथरा और तेज़ी से रेंडर होने वाला था, पर हर शैडो हटा देने से वे दृश्य संकेत भी हट गए जो लोगों को बताते थे कि कौन-से एलिमेंट परतदार या क्लिक करने योग्य हैं।

Google ने 2014 में Material Design से जवाब दिया, जिसे कभी-कभी "फ़्लैट डिज़ाइन 2.0" कहा जाता है, जो शैडो को एक अनुशासित, भौतिक रूप से प्रेरित तरीक़े से वापस लाया: ऊपर वर्णित एलिवेशन-इन-dp प्रणाली, जहाँ किसी शैडो का आकार यह एन्कोड करता है कि कोई सतह कितनी ऊँची तैरती है। फिर 2019 के अंत में डिज़ाइनर Alexander Plyuto की एक वायरल Dribbble अवधारणा ने न्यूमॉर्फिज़्म को चिंगारी दी, इनसेट-और-आउटसेट शैडो का सॉफ़्ट-UI पुनरुद्धार जो 2020–2021 के आसपास चरम पर पहुँचा और फिर एक विशिष्ट कोने में जा बसा (इसके कम कंट्रास्ट ने इसे सुलभ ढंग से इस्तेमाल करना कठिन बना दिया)। मूल सूत्र यह है कि एक सुविचारित शैडो कभी केवल सजावट नहीं होती — यह किसी सपाट स्क्रीन को यह बताने का सबसे सस्ता, सबसे सार्वभौमिक तरीका है कि कौन-सी चीज़ें पास हैं और कौन-सी दूर।

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