इस लेख में
CSS Box Shadow क्या है?
CSS box-shadow प्रॉपर्टी किसी एलिमेंट के फ़्रेम के चारों ओर छाया प्रभाव जोड़ती है। वेब डिज़ाइन में गहराई और दृश्य पदानुक्रम बनाने के लिए यह सबसे व्यापक रूप से उपयोग की जाने वाली CSS प्रॉपर्टी में से एक है। एक ही box-shadow घोषणा में क्षैतिज और लंबवत ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस और रंग शामिल हो सकते हैं।
बॉक्स शैडो को परतों में रखा जा सकता है — आप उन्हें अल्पविराम से अलग करके एक ही एलिमेंट पर कई छायाएँ लागू कर सकते हैं। यह तकनीक यथार्थवादी गहराई, चमकते बॉर्डर और न्यूमॉर्फिक डिज़ाइन जैसे परिष्कृत प्रभाव संभव बनाती है। inset कीवर्ड छाया को एलिमेंट के अंदर पलट देता है, जिससे दबे हुए या धँसे हुए प्रभाव बनते हैं।
हमारा जनरेटर कैसे काम करता है
CheckTown का Box Shadow जनरेटर CSS बॉक्स शैडो बनाने के लिए एक दृश्य इंटरफ़ेस प्रदान करता है। स्लाइडर समायोजित करें, परिणाम को रियल टाइम में देखें, और जब आप प्रभाव से संतुष्ट हो जाएँ तो CSS कॉपी करें।
- सहज स्लाइडर के साथ X ऑफ़सेट, Y ऑफ़सेट, ब्लर रेडियस और स्प्रेड रेडियस समायोजित करें
- ओपेसिटी नियंत्रण के साथ छाया का रंग चुनें, inset मोड टॉगल करें, और कई छायाओं को परतों में रखें
- Subtle, Medium, Large या Glow जैसे प्रीसेट से शुरू करें — फिर अपने डिज़ाइन के अनुरूप अनुकूलित करें
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
एक Box Shadow बनाएँ →बॉक्स शैडो का उपयोग कब करें
आधुनिक वेब इंटरफ़ेस में गहराई और दृश्य पदानुक्रम बनाने के लिए बॉक्स शैडो अनिवार्य हैं। ये उपयोगकर्ता की नज़र का मार्गदर्शन करते हैं और अंतःक्रियात्मकता का संकेत देते हैं।
- कार्ड और पैनल उन्नयन — हल्की छायाएँ कार्ड को पृष्ठभूमि से ऊपर उठाती हैं और एक स्तरित इंटरफ़ेस बनाती हैं
- बटन अवस्थाएँ — अंतःक्रियात्मकता दर्शाने और स्पर्श संबंधी प्रतिक्रिया देने के लिए होवर पर छाया जोड़ें या गहरी करें
- मोडल और ड्रॉपडाउन ओवरले — प्रमुख छायाएँ तैरते हुए एलिमेंट को नीचे के पेज से अलग करती हैं
अक्सर पूछे जाने वाले सवाल
क्या box-shadow लेआउट या प्रदर्शन को प्रभावित करता है?
बॉक्स शैडो लेआउट को प्रभावित नहीं करते — ये पूरी तरह दृश्यात्मक हैं और डॉक्यूमेंट फ़्लो में एलिमेंट के आकार या स्थिति को नहीं बदलते। आधुनिक ब्राउज़र में प्रदर्शन आमतौर पर बेहतरीन होता है, लेकिन बहुत बड़े ब्लर रेडियस या बार-बार रीपेंट होने वाले एलिमेंट पर कई परतदार छायाएँ रेंडरिंग गति को प्रभावित कर सकती हैं।
क्या मैं box-shadow को एनिमेट कर सकता हूँ?
हाँ, box-shadow को CSS ट्रांज़िशन और कीफ़्रेम के साथ एनिमेट किया जा सकता है। हालाँकि, box-shadow को एनिमेट करने से रीपेंट होते हैं, जो महँगे हो सकते हैं। सहज प्रदर्शन के लिए, छाया मानों को स्वयं ट्रांज़िशन करने के बजाय एक स्थिर छाया वाले स्यूडो-एलिमेंट पर opacity को एनिमेट करने पर विचार करें।
box-shadow और drop-shadow में क्या अंतर है?
box-shadow एलिमेंट के बॉक्स (उसके border-radius सहित) पर एक आयताकार छाया लागू करता है। filter: drop-shadow() एक ऐसी छाया लागू करता है जो एलिमेंट के वास्तविक आकार का अनुसरण करती है, जिसमें छवियों के पारदर्शी हिस्से भी शामिल हैं। UI एलिमेंट के लिए box-shadow और पारदर्शिता वाली छवियों के लिए drop-shadow का उपयोग करें।