CSS बॉक्स शैडो
Responsive ने सिखाया layout कब बदलता है। Box shadow Effects & Motion खोलता है: कार्ड के चारों ओर नरम गहराई, फ़ील्ड के अंदर दबा हुआ लुक, या बटन पर हल्की उठान — सब एक प्रॉपर्टी box-shadow से, बिना box model का आकार बदले।
शैडो के हिस्से
📊 box-shadow भाग एक नज़र
| भाग | रोज़ का काम |
|---|---|
offset-x / offset-y |
बॉक्स के सापेक्ष शैडो कहाँ बैठे (positive = दाएँ / नीचे) |
blur-radius |
कोमलता — 0 तेज़ किनारा; बड़ा मान किनारे को फैलाता है |
spread-radius |
वैकल्पिक; blur से पहले शैडो आकार बढ़ा/घटाता है |
color |
अक्सर rgba(...) ताकि शैडो अर्ध-पारदर्शी रहे |
inset |
वैकल्पिक keyword — शैडो बॉक्स के अंदर खींचता है |
| कई सूचियाँ | कॉमा से अलग शैडो परतें (दूर नरम + पास तीखा) |
Elevation सोचें, सजावट की बाढ़ नहीं। कार्ड के नीचे एक नरम परत अक्सर तीन तेज़ outlines से बेहतर होती है।
नरम बाहरी elevation
कार्ड का आम नुस्खा: छोटा नीचे offset, मध्यम blur, कम या शून्य spread, और पारभासी काला (या ग्रे)। शैडो ऊपर से रोशनी का इशारा दे — बॉक्स के पीछे चिपका काला आयत न लगे।
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
Positive offset-y शैडो को बॉक्स के नीचे गिराता है। Alpha कम रखें ताकि टेक्स्ट और पड़ोसी पढ़ने योग्य रहें।
Inset — बॉक्स के अंदर गहराई
inset keyword जोड़ें ताकि शैडो अंदर की ओर बने। Wells, दबे बटन, या recessed महसूस होने वाले input fields के लिए उपयोगी।
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
Inset border या padding की जगह नहीं लेता — यह केवल बदलता है कि रोशनी painted क्षेत्र के अंदर कैसे गिरती प्रतीत हो।
परतदार shadows
एक से अधिक शैडो लिखें, कॉमा से अलग। दूर की नरम परत और पास की सघन परत अक्सर प्राकृतिक elevation पढ़ती है — भारी outline के बिना।
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
सूची में क्रम paint order है; दोनों उसी element के हैं। एक अपारदर्शी धब्बे से बेहतर दो शांत परतें।
Reset, accent, और बॉक्स पर फोकस
जब कोई state फिर सपाट लगे तो box-shadow: none सेट करें। रंगीन शैडो ब्रांड accent सहारा दे सकता है — blur नरम और alpha संयमित रखें। याद रखें: glyphs के लिए text-shadow (Text Effects); boxes के लिए box-shadow।
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
खुद आज़माएँ
- सफेद कार्ड को एक नरम बाहरी शैडो दें (
0x-offset, छोटा y, ~1rem blur, कम alpha)। - सर्च फ़ील्ड पर
insetशैडो जोड़ें ताकि थोड़ा recessed लगे। - एक पैनल को दो-परत stack में अपग्रेड करें (पास + दूर)।
- अभ्यास फ़ाइल में कोई ठोस काला
box-shadowढूँढें औरrgbaसे नरम करें। - पुष्टि करें कि heading glow
text-shadowइस्तेमाल करता है,box-shadowनहीं।
आम गलतियाँ
- पूरी तरह अपारदर्शी काली शैडो जो डुप्लिकेट बॉक्स लगें
- blur और spread को एक ही नॉब समझना
- टेक्स्ट पर
box-shadowलगाना जब मतलबtext-shadowथा - हर list item, लिंक और आइकन पर शैडो जब तक पेज धुँधला लगे
- जब design को pressed या hollow लुक चाहिए तो
insetभूल जाना
सारांश
box-shadowमें offset, blur, वैकल्पिक spread, color, और वैकल्पिकinsetहोते हैं- नरम पारभासी बाहरी शैडो शांत elevation बेचती हैं
- कॉमा से अलग परतें गहराई दें; सपाट करने के लिए
none - Boxes ≠ glyphs —
text-shadowटेक्स्ट के लिए रखें - Effects & Motion में आगे: Transitions
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी