इस Tutorial में हम आपको CSS box-shadow Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
List of Content
CSS box-shadow Property का परिचय
जिस तरह Content को आकर्षक और अलग दिखाने के लिए text-shadow का इस्तेमाल किया जाता हैं. ठीक उसी प्रकार हम पूरे Element को भी आकर्षक और अलग बना सकते हैं.
पूरे Element से हमारा मतलब Element Box से हैं. क्योंकि CSS Box Model के अनुसार HTML Element एक Box होता हैं. जो Margin, Border, Padding और Content से मिलकर बनता हैं.
Element पर Shadow Effect लगाने के लिए CSS box-shadow Property का इस्तेमाल किया जाता हैं. Shadow Effect से एक Element अन्य Element की तुलना में अलग नजर आता हैं.
Different Type of box-shadow Property Values
Elements पर Shadow Effect को नियत्रिंत करने के लिए box-shadow Property का इस्तेमाल किया जाता हैं. इनके बारे में नीचे बताया जा रहा हैं.
- h-offset – इस Value को Horizontal Shadow कहा जाता हैं. इसके द्वारा Box के Left और Right Side में Shadow को Declare किया जाता हैं. Positive Value से Shadow Right Side में Show होती हैं. और Negative Value से Shadow Left Side में Show होती हैं.
- v-offset – इस Value को Vertical Shadow कहा जाता हैं. इसके द्वारा Box के Top और Bottom Side में Shadow Effect को Set किया जाता हैं. Positive Value से Shadow Bottom Side में दिखाई देती हैं. और Negative Value से Top Side में Show होगी.
- blur – इस Value से Shadow को साफपन या धुँधलापन तय किया जाता हैं. Positive Value से Shadow में धुँधलापन बढता जाएगा और Negative Value (घटाना) से Shadow साफ होती जाती हैं.
- spread – Spread मतलब आप Shadow Box से कितनी दूर तक देखना चाहते हैं. इसे समझने के लिए Width भी कह सकते हैं. Positive Value से Shadow Spread होती हैं और Negative Value से Shadow का फैलाव कम होता हैं.
- color – इस Value से Shadow Color को Define किया जाता हैं. इसकी Define Value Text Color होती हैं. जिसे आप अपनी पसंदानुसार Set कर सकते हैं.
- inset – By Default Box Shadow बाहर की तरफ Show होती हैं. inset Value द्वारा इसे अंदर की तरफ दिखाया जाता हैं.
- initial – इससे Default Value Set हो जाती हैं.
- inherit – इस Value से Parent Element की Value तय हो जाती हैं.
- none – इससे कोई Shadow Set नही होगी. और जो पहले से Set की हुई हैं वो भी दिखाई नही देगी.
Syntax of box-shadow Property
box-shadow Property Example
इसे Try कीजिए
<html>
<head>
<title>CSS box-shadow Property Example</title>
<style type=”text/css”>
#div1 {
padding:10px;border: 2px solid red;
}
#div2 {
padding:10px;border: 2px solid red;box-shadow: 10px 10px black;
}
#div3 {
padding:10px;border: 2px solid red;box-shadow: 5px 5px yellow, 10px 10px red, 15px 15px green;
}
</style>
</head>
<body>
<p>नीचे हम 3 Div Define कर रहे हैं. जिसमे हमने DIV1 पर कोई box-shadow नही लगाऐंगे. Div2 पर हम साधारण यानि Single Shadow Effect लगाऐंगे. और Div3 पर हम Multiple Shadow Effect Set करेंगे. </p>
<div id=”div1″>This is Div1.</div>
<div id=”div2″>This is Div2.</div>
<div id=”div3″>This is Div3.</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
नीचे हम 3 Div Define कर रहे हैं. जिसमे हमने DIV1 पर कोई box-shadow नही लगाऐंगे. Div2 पर हम साधारण यानि Single Shadow Effect लगाऐंगे. और Div3 पर हम Multiple Shadow Effect Set करेंगे.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS box-shadow Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की box-shadow Property Values के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
Leave a Reply