CSS Box Shadow Property in Hindi
Box-Shadow property एक नयी property है जिसे css3 में दरसाया गया है | किसी element में shadow लगाने के लिए box-shadow property का इस्तेमाल होता है | जिससे element और ज्यादा आकर्षित लगता है |
Syntax of box-shadow property
box-shadow: x-offset y-offset blur spread color;
उदाहरण
box-shadow: 3px 3px 6px 2px red;
description of box-shadow properties
- x-offset —— इस value से element की horizontal shadow सेट की जाती है | दायीं या बायीं की तरफ shadow लगाने के लिए x-offset को सेट की जाती है | अगर value positive में दी गयी तो shadow दायीं तरफ दिखेगा और negative value दी गयी तो shadow बायीं तरफ दिखेगा|
- y-offset —— इस value से element की vertical shadow सेट की जाती है | ऊपर या निचे की तरफ shadow लगाने के लिए y-offset को सेट की जाती है | positive value से shadow निचे की तरफ दिखेगा और negative value से shadow ऊपर की तरफ दिखेगा |
- blur —— shadow को धुन्दला करना है या साफ़ दिखाना है, blur value से वो बताया जाता है |
- spread —— shadow कितनी बड़ी दिखानी है यानि वो कितनी दूर तक फैली हुयी दिखेगी वो spread value से सेट की जाती है |
- color —— shadow को कोनसी रंग में दिखाना है वो color value से सेट की जाती है |
उदाहरण:
<!doctype html>
<html>
<head>
<title>box-shadow demo</title>
<style>
h3{
border:1px solid black;
width: 200px;
text-align:center;
margin:100px;
padding:15px;
box-shadow: 5px 5px 6px 4px blue;
}
</style>
</head>
<body>
<div>
<h3>Element with Box Shadow around it.</h3>
</div>
</body>
</html>
output
ऊपर के उदाहरण में देखिये shadow दायीं और निचे की तरफ लगायी गयी है | अब हम shadow बायीं और ऊपर की तरफ कैसे लगायेंगें वो देखेंगे |
<!doctype html>
<html>
<head>
<title>box-shadow demo</title>
<style>
h3{
border:1px solid black;
width:200px;
text-align:center;
margin:100px;
padding:15px;
box-shadow: -10px -10px olive;
}
</style>
</head>
<body>
<div>
<h3>Element with Box Shadow around it.</h3>
</div>
</body>
</html>
output
**box-shadow property में blur, spread और color value देना optional है | आप चाहें तो blur, spread और color value दे सकते हैं या फिर छोड़ सकतें हैं | by-default shadow की color black दिखायी देगी अगर कोई color सेट नहीं किआ गया हो तो |
multiple box-shadow कैसे सेट करें ?
एक element के लिए एक से अधिक shadow भी लगायी जा सकती है | उसके लिए box-shadow values को , (comma) से अलग करके लिखी जा सकती है |
उदाहरण:
<!doctype html>
<html>
<head>
<title>box-shadow demo</title>
<style>
h3{
border:1px solid black;
width: 200px;
text-align:center;
margin:100px;
padding:15px;
box-shadow: 5px 5px 4px 4px olive, 12px 12px 5px 7px grey;
}
</style>
</head>
<body>
<div>
<h3>Element with Box Shadow around it.</h3>
</div>
</body>
</html>
output
inset box-shadow property value
अगर किसी element की box-shadow को बाहार की तरह नहीं बलकी अंदर की तरफ दिखाना हो, तो inset value के जरिये किया जा सकता है |
उदाहरण
h3{ box-shadow: 5px 5px 6px 7px grey inset;}output
