CSS शैडो जनरेटर (box-shadow, text-shadow)

स्लाइडर से box-shadow, text-shadow और filter: drop-shadow() को समायोजित करता है, छाया की कई परतें जमा करता है और आपको CSS देता है। इसका उपयोग किसी कार्ड या बटन की गहराई, दबा हुआ inset रूप या टेक्स्ट आउटलाइन तय करने के लिए करें, जबकि आप लाइव पूर्वावलोकन देखते रहें।

इस्तेमाल का तरीका

1. "प्रकार" में box-shadow, text-shadow या filter: drop-shadow चुनें।
2. "छाया की परतें" की हर परत में "X ऑफ़सेट", "Y ऑफ़सेट", "ब्लर", "स्प्रेड" (केवल box-shadow), "छाया का रंग" और "अपारदर्शिता" सेट करें। भीतरी छाया के लिए "भीतरी" चालू करें।
3. और परतों के लिए "परत जोड़ें" या "डुप्लिकेट करें" दबाएं और क्रम बदलने के लिए तीरों का उपयोग करें। किसी परत का चेक हटाने से वह कुछ समय के लिए बाहर रह जाती है।
4. बाईं ओर के पूर्वावलोकन में "पृष्ठभूमि", "कार्ड का रंग", "कोनों की गोलाई" और "कार्ड का आकार" को अपनी वास्तविक स्क्रीन से मिलाएं।
5. चाहें तो "प्रीसेट" में से कोई शुरुआती बिंदु चुनें, फिर CSS के बगल में "कॉपी करें" दबाएं।

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

• box-shadow की एक परत "[inset] x y ब्लर स्प्रेड रंग" के रूप में लिखी जाती है। धनात्मक स्प्रेड छाया को बड़ा करता है, ऋणात्मक उसे छोटा करता है। text-shadow में स्प्रेड और inset नहीं होते।
• filter: drop-shadow() बॉक्स के बजाय दिखाई देने वाले आकार (कोई PNG आइकन, कोई SVG) का अनुसरण करता है, और एक के बाद एक लिखे गए कई फ़ंक्शन एक-दूसरे पर जमा होते हैं।
• रंग अपारदर्शी होने पर HEX में और अन्यथा rgb(r g b / a) में लिखे जाते हैं। स्वाभाविक गहराई आम तौर पर कम अपारदर्शिता और बढ़ते ब्लर वाली दो या तीन परतों से आती है।
• परतें और पूर्वावलोकन की सेटिंग्स इस ब्राउज़र में संग्रहीत रहती हैं।

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

box-shadow में मानों का क्रम क्या है?

X ऑफ़सेट, Y ऑफ़सेट, ब्लर, स्प्रेड, रंग, और भीतरी छाया के लिए inset सबसे पहले रखा जाता है। उदाहरण: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)।

किसी कार्ड को स्वाभाविक छाया कैसे दें?

10 से 20 प्रतिशत अपारदर्शिता की दो या तीन परतें जमा करें और ऊर्ध्वाधर ऑफ़सेट तथा ब्लर को चरण-दर-चरण बढ़ाएं। "मध्यम ऊंचाई" और "मुलायम, 5 परतें" प्रीसेट इसी तरह बनाए गए हैं।

क्या text-shadow से टेक्स्ट आउटलाइन बनाई जा सकती है?

हां। चार दिशाओं (1px 1px, -1px -1px, 1px -1px, -1px 1px) में शून्य ब्लर वाली चार छायाएं एक पतली आउटलाइन बनाती हैं। "टेक्स्ट आउटलाइन" प्रीसेट बिल्कुल यही करता है।

box-shadow और drop-shadow फ़िल्टर में क्या अंतर है?

box-shadow तत्व के आयताकार बॉक्स पर छाया देता है; drop-shadow फ़िल्टर दिखाई देने वाले आकार पर छाया देता है। पारदर्शी पृष्ठभूमि पर आइकन या SVG के लिए drop-shadow सही विकल्प है।