CSS Shadows

अपनी desk के ऊपर एक cardboard card पकड़ने की कल्पना करें। अगर इसके सीधे ऊपर एक light है, तो card नीचे desk पर एक soft shadow डालता है, जिससे आप देख सकते हैं कि card कितना ऊँचा float कर रहा है। CSS shadows वही lighting effects हैं। box-shadows या text-shadows लागू करके, आप अपने elements में vertical depth और coordinate layers जोड़ सकते हैं, अपने primary buttons, alert cards, और headers को background से उभारते हुए।

In this page:

box-shadow Syntax
कई Shadows इस्तेमाल करना
text-shadows लागू करना
Pressed Inset Shadows
Neumorphic Border Layout

Syntax

css

selector {
  box-shadow: h-offset v-offset blur spread color;
  text-shadow: h-offset v-offset blur color;
}

box-shadow Syntax

box-shadow property आपके element containers में एक shadow जोड़ती है। यह shadow define करने के लिए पाँच values इस्तेमाल करती है: horizontal offset, vertical offset, blur radius (shadow कितना soft दिखता है), spread radius (यह कितना बड़ा expand होता है), और color।

Note:

अपने elements को realistic दिखाने के लिए soft, semi-transparent black shadows (जैसे rgba(0,0,0,0.1)) इस्तेमाल करें।
Accepted values:
<offset-x> <offset-y> — ज़रूरी horizontal और vertical offsets
<blur-radius> — optional, बड़ा value softer
<spread-radius> — optional, shadow को बढ़ाता या घटाता है
<color> — shadow color (default currentcolor)
inset — shadow को box के अंदर draw करता है
none — कोई shadow नहीं (default)
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: solid, dark black shadows इस्तेमाल करने से बचें, क्योंकि वे harsh और artificial दिखते हैं।

उदाहरण: The box-shadow Syntax

css

<style>
.box {
  background: white;
  padding: 16px;
  box-shadow: 2px 4px 8px 0px gray;
}
</style>
<div class="box">Shadowed box</div>

कई Shadows इस्तेमाल करना

आप उनकी declarations को commas से अलग करके एक ही element पर कई overlapping shadows लागू कर सकते हैं, जिससे आप rich, realistic depth effects बना सकते हैं।

Note:

realistic lighting depth बनाने के लिए एक छोटा, dark shadow को एक बड़े, soft shadow के साथ combine करें।
Accepted values:
box-shadow: A, B — comma-separated list, पहली सबसे ऊपर है
none — कोई shadows नहीं
inset — कोई भी layer inner हो सकती है
<color> — हर layer का अपना color है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: बहुत ज़्यादा overlapping shadows जोड़ना पुराने devices पर page loading speeds धीमी कर सकता है।

उदाहरण: Using Multiple Shadows

css

<style>
.box {
  background: white;
  padding: 16px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.15);
}
</style>
<div class="box">Layered shadows for depth</div>

text-shadows लागू करना

text-shadow property text characters पर सीधे shadows लागू करती है। यह तीन values इस्तेमाल करती है: horizontal offset, vertical offset, और blur radius, उसके बाद shadow color।

Note:

light background images पर रखे जाने पर white headers को readable बनाने के लिए एक subtle text-shadow इस्तेमाल करें।
Accepted values:
<offset-x> <offset-y> — ज़रूरी offsets
<blur-radius> — optional blur
<color> — optional color (default currentcolor)
A, B — कई shadows के लिए comma-separated list
none — कोई shadow नहीं (default)
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: छोटे body text पर text-shadows लागू करना characters को blurry और पढ़ना मुश्किल बना सकता है।

उदाहरण: Applying text-shadows

css

<style>
h1 {
  text-shadow: 2px 2px 4px black;
}
</style>
<h1>Shadowed Text</h1>

Pressed Inset Shadows

Default रूप से, box-shadows आपके elements के बाहर render होते हैं। अपनी box-shadow declaration की शुरुआत में inset keyword जोड़कर, आप browser को shadow को अंदर cast करने का instruction देते हैं, element को pressed या page में sunken जैसा दिखाते हुए।

Note:

active, pressed button states या form input fields को साफ़ तरीके से style करने के लिए inset shadows इस्तेमाल करें।
Accepted values:
inset — shadow को padding edge के अंदर draw करता है
<offset-x> <offset-y> — जिस दिशा में inner shadow पड़ता है
<blur-radius> — inner edge की softness
<spread-radius> — inner shadow की thickness

Warning: अगर आपके element borders में matching border-radius settings नहीं हैं तो inset shadows blocky दिख सकते हैं।

उदाहरण: Pressed Inset Shadows

css

<style>
.button {
  background: #ddd;
  padding: 16px;
  box-shadow: inset 2px 2px 4px gray;
}
</style>
<div class="button">Pressed / inset look</div>

Neumorphic Border Layout

Neumorphism एक modern web design style है जो soft, plastic-like layouts बनाती है। top-left पर एक light shadow को bottom-right पर एक dark shadow के साथ combine करके, आप elements को page background से सीधे mould किए गए जैसा दिखाते हैं।

Note:

Neumorphism को आपके element के background color को page background color से exactly match करना चाहिए।
Accepted values:
box-shadow: A, B — दो comma-separated shadows (light और dark)
negative offsets — top-left की तरफ़ light shadow
positive offsets — bottom-right की तरफ़ dark shadow
inset — effect को pressed look में flip करता है

Warning: अगर आपके shadows बहुत light हैं तो neumorphic layouts की accessibility contrast खराब हो सकती है, कुछ users के लिए इसे देखना मुश्किल बनाते हुए।

उदाहरण: The Neumorphic Border Layout

css

<style>
.box {
  background: #e0e0e0;
  box-shadow: -6px -6px 12px white, 6px 6px 12px rgba(0,0,0,0.2);
}
</style>
<div class="box">Neumorphic box</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Gradients Next Lesson → CSS Filters

CSS Shadows

box-shadow Syntax

कई Shadows इस्तेमाल करना

text-shadows लागू करना

Pressed Inset Shadows

Neumorphic Border Layout

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code