CSS box-shadow जनरेटर

यह कैसे काम करता है

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

चारों संख्याओं का मतलब

क्रम में: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर रेडियस और स्प्रेड। ऑफ़सेट शैडो को खिसकाते हैं; ब्लर उसके किनारे को नरम करता है; स्प्रेड ब्लर से पहले उसे बढ़ाता या सिकोड़ता है। ऋणात्मक स्प्रेड शैडो को अंदर खींचता है, जिससे आपको कार्ड के नीचे कसी हुई शैडो मिलती है जो किनारों से बाहर नहीं फैलती।

इसे असली जैसा दिखाना

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

इनसेट शैडो

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

एक साथ कई शैडो

CSS कॉमा से अलग की गई सूची स्वीकार करता है, और दो को परत-दर-परत लगाना — एक कसी और गहरी, एक चौड़ी और हल्की — अकेली शैडो से कहीं बेहतर दिखता है। यह जनरेटर एक बनाता है; परतदार असर के लिए दो खुद साथ में पेस्ट करें।