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

box-shadow प्रॉपर्टी की बनावट

एक अकेली box-shadow एक तय क्रम में मानों की सूची होती है: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या, स्प्रेड त्रिज्या और रंग, साथ में एक वैकल्पिक inset कीवर्ड। केवल दोनों ऑफ़सेट और रंग ज़रूरी हैं; ब्लर और स्प्रेड डिफ़ॉल्ट रूप से शून्य होते हैं। तो जो शॉर्टहैंड 0px 4px 12px rgba(0, 0, 0, 0.15) के रूप में पढ़ा जाता है उसका मतलब है कोई क्षैतिज हलचल नहीं, चार पिक्सेल नीचे, बारह पिक्सेल का ब्लर, कोई स्प्रेड नहीं, और 15 प्रतिशत काला। इस टूल के स्लाइडर आपके लिए ठीक वही स्ट्रिंग लिख देते हैं, पर क्रम को समझ लेने से हाथ से संपादन तकलीफ़-रहित हो जाता है।

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

ब्लर और स्प्रेड: वे दो त्रिज्याएँ जिन्हें लोग गड्डमड्ड कर देते हैं

ब्लर त्रिज्या यह नियंत्रित करती है कि किनारा कितना नरम है। शून्य पर आपको बॉक्स की एक तीखे किनारे वाली नकल मिलती है; जैसे-जैसे ब्लर बढ़ता है शैडो एक चौड़ी पट्टी पर फीकी पड़ती जाती है और असली फैले हुए प्रकाश जैसी ज़्यादा दिखती है। अधिकांश स्वाभाविक शैडो ऐसा ब्लर इस्तेमाल करती हैं जो लगभग ऊर्ध्वाधर ऑफ़सेट का दो से तीन गुना हो। ध्यान दें कि ब्लर ऋणात्मक नहीं हो सकता।

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

दबी हुई और धँसी हुई सतहों के लिए inset शैडो

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

कई शैडो को परतों में रखना

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

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

हल किया हुआ उदाहरण: एक नरम कार्ड शैडो

यहाँ एक नुस्खा है जो लगभग किसी भी हल्की सतह पर अच्छा लगता है। बिना किसी क्षैतिज ऑफ़सेट से शुरू करें ताकि शैडो केंद्र में रहे, लगभग 8px का ऊर्ध्वाधर ऑफ़सेट, क़रीब 24px का ब्लर, और लगभग ऋणात्मक 6px का स्प्रेड ताकि वह कार्ड के नीचे दब जाए। लगभग-काला रंग इस्तेमाल करें पर ओपेसिटी घटाकर क़रीब 12 प्रतिशत कर दें, जिसे rgba(0, 0, 0, 0.12) के रूप में व्यक्त किया जाता है। ऋणात्मक स्प्रेड नरम किनारे को कोनों से बाहर बहने से रोकता है, कम ओपेसिटी उसे किसी धब्बे जैसा दिखने से रोकती है, और संतुलित ऑफ़सेट ऊपर से आती एक कोमल रोशनी का आभास देता है। और भी तीखे नतीजे के लिए, 1px ऑफ़सेट, लगभग-शून्य ब्लर, और क़रीब 6 प्रतिशत काले रंग वाली एक दूसरी शैडो परत में जोड़ें ताकि एक तीखी संपर्क-रेखा का छद्म रचा जा सके।

आम गलतियाँ और उनसे कैसे बचें

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

लोग box-shadow को drop-shadow फ़िल्टर के साथ भी गड्डमड्ड कर देते हैं। box-shadow हमेशा एलिमेंट के आयताकार बॉक्स का अनुसरण करता है, उसके border-radius सहित, इसलिए बॉक्स के भीतर मौजूद किसी पारदर्शी PNG को भी एक आयताकार शैडो मिलती है। drop-shadow फ़िल्टर असल गैर-पारदर्शी पिक्सेल का अनुसरण करता है, जो अनियमित आकृतियों और कटी-छँटी छवियों के लिए आप चाहते हैं। कार्ड, बटन और पैनल के लिए box-shadow इस्तेमाल करें; जब आकृति आयताकार न हो तब फ़िल्टर की ओर हाथ बढ़ाएँ।

परफ़ॉर्मेंस और बड़े-ब्लर का जाल

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