 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३३ सीखेंगे।
पिछले लेसन में हम ने CSS box model के बारे में सीखा।
आज हम box shadow देखेंगे।
CSS box shadow
हम ने इससे पहले CSS text-shadow प्रॉपर्टी का उपयोग करके टेक्स्ट को shadow कैसा देते हैं यह सीखा है। वैसे ही हम बॉक्स को भी shadow डिस्प्ले सकते हैं। आज हम बॉक्स को shadow देना सीखेंगे।
तो हम इसके लिए हमारा स्क्रिप्ट लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-32 को कॉपी कीजिये।
इस में para1 और para2 का स्टाइल ऐसा लिखिए। हमने lesson-32 के स्टाइल में बदल किये हैं। इस लिए नया कोड निचे दिया है। आप निचे दिया हुआ कोड para1 और para2 के लिए कॉपी कर लीजिये।
#para1 {
color:blue;
text-indent: 8vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
border: 0.5vw solid red;
}
#para2 {
color:blue;
text-indent: 8vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
}
हम para1 के स्टाइल में box-shadow लिखेंगे। बॉक्स shadow प्रॉपर्टी ऐसी लिखी जाती है।
box-shadow: 0.5vw 0.5vw green;
इसे para1 के स्टाइल में इन्सर्ट कीजिये। इस फाइल को "Lesson-33" और "Lesson-33.html" के नाम से save कीजिये। HTML Document पर डबल क्लिक कीजिये और आउटपुट देखिये। इस में आप para1 को shadow देख सकते हैं। हम ने heading को outline दी है और para1 को shadow दी है। आप दोनों कैसी दिखती है ध्यान से देखिये।
तो box-shadow प्रॉपर्टी का syntax कैसा होता है?
box-shadow: horizontal-offset, vertical-offset, blur, spread, color
हम ने बॉक्स shadow के लिए लिखा है
box-shadow: 0.5vw 0.5vw green;
इस में horizontal-offset 0.5vw है, vertical-offset 0.5vw है, और कलर green है।
हम एक से ज्यादा shadows दे सकते हैं। हम और एक काले रंग की shadow देंगे। इस लिए हम लिखेंगे -
box-shadow: 0.5vw 0.5vw green, 1vw 1vw black;
हमने दो shadows में एक comma दिया है।
अब ऊपर दिया हुआ box-shadow हमारे स्क्रिप्ट में पहले box-shadow की जगह पर लिखिए। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।
 |
| आकृति ३३-१ CSS Box shadow |
इस फाइल को "Lesson-33" और "Lesson-33.html" के नाम से save कीजिये। HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३३-२ CSS Box shadow |
यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
अगर हम तीसरा value देते हैं तो वह blur की value होती है, जैसे
box-shadow: 0.5vw 0.5vw 0.25 vw #0000FF।
Blurring का मतलब है shadow कम कम होती जाना या धुँधली होना।
Important Points:
०१. CSS box-shadow property एक element के बॉर्डर को shadow डिस्प्ले करने के लिए होती है।०२. इस में हम horizontal-offset, vertical-offset और shadow का कलर देते हैं।
०३. हम एक ही shadow statement में एक से ज्यादा shadows दे सकते हैं।
लेसन ३२ लेसन ३४
