बॉक्स शैडो जनरेटर
CSS box-shadow विज़ुअली बनाएं, कई स्टैक्ड लेयर और inset शैडो के सपोर्ट के साथ.
यह कैसे काम करता है
हर शैडो लेयर एक छोटा ऑब्जेक्ट है जिसमें होरिज़ॉन्टल और वर्टिकल ऑफ़सेट, ब्लर, स्प्रेड, रंग, ओपैसिटी और एक 'इनसेट' फ्लैग होता है. चूंकि HTML कलर पिकर पारदर्शिता सपोर्ट नहीं करते, हेक्स वैल्यू को उसके रेड, ग्रीन, ब्लू हिस्सों में तोड़ा जाता है और फिर ओपैसिटी स्लाइडर के साथ मिलाकर एक rgba() रंग बनाया जाता है. सभी लेयर्स को कॉमा से जोड़कर एक box-shadow डिक्लेरेशन बनता है, और यही स्ट्रिंग प्रीव्यू एलिमेंट पर लगाई जाती है, यानी जो दिखता है वही कॉपी होता है. क्रम मायने रखता है: लिस्ट में सबसे ऊपर की शैडो बाकियों के ऊपर रेंडर होती है.
अकेली एक शैडो लगभग हमेशा नकली दिखती है. असली शैडो का एक टाइट, गहरा कोर होता है और एक नरम, फैला हुआ फेड, और 0 4px 12px rgba(0,0,0,0.25) जैसी एक चीज़ दोनों एक साथ नहीं कर सकती. हर सही डिज़ाइन सिस्टम की ट्रिक यही है: दो या तीन हल्की-ओपैसिटी शैडो को स्टैक करना, एक टाइट 0 1px 2px 10% पर, एक चौड़ी 0 8px 24px 8% पर. अकेले हर लेयर लगभग नज़र नहीं आती, लेकिन साथ में गहराई का असली एहसास देती हैं.
सब कुछ इस पेज के जावास्क्रिप्ट में चलता है: आपका चुना कोई भी रंग या बना कोई भी CSS कहीं भेजा नहीं जाता, यह आप काम करते समय डेवलपर टूल्स के नेटवर्क टैब में देख सकते हैं.
सामान्य प्रश्न
"Inset" क्या करता है?
शैडो को बॉक्स के बाहर से अंदर की तरफ़ पलट देता है, जिससे तैरता हुआ लुक नहीं बल्कि अंदर की ओर खुदा हुआ लुक बनता है.
क्या मैं कई शैडो एक साथ लगा सकता हूं?
हां, अतिरिक्त शैडो जोड़ने के लिए "शैडो लेयर जोड़ें" पर क्लिक करें, CSS box-shadow इसे कॉमा से अलग की गई वैल्यू के ज़रिए खुद ही सपोर्ट करता है. एक सॉफ़्ट, बड़े शैडो के साथ एक टाइट, गहरे शैडो को लेयर करना ज़्यादा असली डेप्थ इफ़ेक्ट पाने का आम तरीक़ा है.
क्या यह कहीं भेजा जाता है?
नहीं, प्रीव्यू और CSS पूरी तरह आपके ब्राउज़र में जनरेट होते हैं. कुछ भी अपलोड नहीं होता.