यह ब्लॉग HTML तत्वों पर छाया प्रभाव लागू करने की विधि पर चर्चा करेगा।
CSS का उपयोग करके HTML तत्वों पर छाया प्रभाव कैसे छोड़ें?
' डब्बे की छाया ” संपत्ति एक तत्व के चारों ओर एक छाया जोड़ती है जहां दो या अधिक जोड़े गए प्रभाव मूल्यों को अल्पविराम से अलग किया जा सकता है।
बॉक्स-शैडो प्रॉपर्टी का सिंटैक्स नीचे वर्णित है।
वाक्य - विन्यास
डब्बे की छाया : कोई भी नहीं |एच-ऑफसेट वी-ऑफसेट ब्लर स्प्रेड कलर | इनसेट | शुरुआती | इनहेरिट ;
उपर्युक्त सिंटैक्स का विवरण नीचे सूचीबद्ध है:
- ' कोई भी नहीं ”: यह बॉक्स-शैडो प्रॉपर्टी का डिफ़ॉल्ट मान है।
- ' एच-ऑफ़सेट ”: यह मान क्षैतिज दूरी का प्रतिनिधित्व करता है।
- ' वि ऑफसेट ”: यह मान लंबवत दूरी को परिभाषित करता है।
- ' कलंक ”: तीसरा मान धुंधला है। इसके मूल्य को अधिकतम करने से धुंधले प्रभाव को अधिकतम किया जाएगा।
- ' फैला हुआ ”: चौथा मान छाया प्रसार का प्रतिनिधित्व करता है। यह धनात्मक या ऋणात्मक मान धारण कर सकता है, जहाँ धनात्मक मान प्रसार को बढ़ाता है, और ऋणात्मक मान इसे घटाता है।
- ' रंग ”: यह मान वैकल्पिक है, वर्तमान रंग का प्रतिनिधित्व करता है।
- ' शुरुआती ”: यह मान इसके प्रारंभिक मान का गुण सेट करता है।
- ' इनहेरिट ”: यह मान अपने मूल तत्व की संपत्ति को इनहेरिट करता है।
- ' इनसेट ”: बॉक्स के अंदर छाया बनाने के लिए इनसेट वैल्यू का उपयोग किया जाता है।
आइए देखें कि छाया प्रभाव एक व्यावहारिक उदाहरण के माध्यम से कैसा दिखता है।
उदाहरण
HTML फ़ाइल में, पहले 'जोड़ें' <दिव> ”। इस
और
टैग जोड़ें।
एचटीएमएल
< डिव >< एच 1 > द बॉक्स शैडो < / एच 1 >
< पी > बॉक्स-छाया: 3px 8px < / पी >
< / डिव >
अब, जोड़े गए HTML तत्वों में CSS गुण लागू करें।
सीएसएस
डिव {डब्बे की छाया : 3 पीएक्स 8 पीएक्स ;
}
Div तत्व को संपत्ति के साथ लागू किया जाता है ' डब्बे की छाया 'मूल्य के साथ' 3 पीएक्स 8 पीएक्स ”, जो क्षैतिज ऑफसेट और लंबवत ऑफसेट का प्रतिनिधित्व करता है।
उत्पादन
अगले भाग में, HTML तत्वों को विभिन्न गुणों के साथ स्टाइल किया जाएगा।
सीएसएस
डिव {सीमा : 5 पीएक्स ठोस rgb ( 255 , 111 , 1 ) ;
डब्बे की छाया : 3 पीएक्स 8 पीएक्स 9 पीएक्स 4 पीएक्स #f4af1b ;
}
निम्नलिखित अतिरिक्त CSS गुण हैं जो div तत्व पर लागू होते हैं:
- ' सीमा ” संपत्ति को 5px ठोस आरजीबी (255, 111,1) मान दिया गया है, जहां 5px सीमा की चौड़ाई को इंगित करता है, ठोस सीमा की शैली का प्रतिनिधित्व करता है, और आरजीबी (255, 111, 1) रंग है।
- ' डब्बे की छाया ”3px 8px 9px 4px मान वाली संपत्ति #f4af1b एच-ऑफ़सेट को 3px के रूप में दर्शाती है, v-ऑफ़सेट को 8px के रूप में दर्शाती है, 9px के रूप में ब्लर करती है, 4px के रूप में फैलती है, और #f4af1b रंग निर्दिष्ट करती है।
ऊपर दिया गया कोड नीचे दिखाए गए अनुसार div तत्व प्रदर्शित करेगा:
अब, अगले भाग में, दो div तत्वों का प्रतिनिधित्व करने वाले दो बॉक्स बनाएँ। हम प्रत्येक को अलग-अलग कई बॉक्स-शैडो मान देंगे और परिणाम देखेंगे।
एचटीएमएल
<डिव आईडी = 'बॉक्स1' ><एच 1 > द बॉक्स शैडो >
<प > डब्बे की छाया : 3 पीएक्स 8 पीएक्स 9 पीएक्स 4 पीएक्स #f4af1b >
>
<डिव आईडी = 'बॉक्स2' >
<एच 1 > द बॉक्स शैडो >
<प > डब्बे की छाया : 3 पीएक्स 8 पीएक्स 9 पीएक्स 4 पीएक्स #f4af1b >
>
स्टाइल बॉक्स1 डिव
# बॉक्स1 {चौड़ाई : 40% ;
ऊंचाई : 140 पीएक्स ;
सीमा : 5 पीएक्स ठोस #ff9c83 ;
डब्बे की छाया : 8 पीएक्स 10 पीएक्स 15 पीएक्स 20 पीएक्स #807f7f ;
}
यहां:
- ' # बॉक्स1 ” का उपयोग आईडी बॉक्स 1 के साथ div तक पहुँचने के लिए किया जाता है।
- ' चौड़ाई 'संपत्ति का उपयोग तत्व की चौड़ाई की सेटिंग के लिए किया जाता है।
- ' ऊंचाई ' संपत्ति तत्व की ऊंचाई निर्धारित करती है।
- ' सीमा ” दिया गया मान 5px ठोस #ff9c83 है जहाँ 5px बॉर्डर की चौड़ाई इंगित करता है, ठोस बॉर्डर की शैली का प्रतिनिधित्व करता है, और #ff9c83 रंग है।
- ' डब्बे की छाया 'संपत्ति' के रूप में सेट की जाएगी 8पीएक्स 10पीएक्स 15पीएक्स 20पीएक्स #807f7f ” जहां 8px क्षैतिज ऑफ़सेट है, 10px लंबवत ऑफ़सेट है, 15px धुंधला प्रभाव है, 20px स्प्रेड प्रभाव है, और #807f7f छाया का रंग है।
स्टाइल बॉक्स2 डिव
#बॉक्स2 {चौड़ाई : 40% ;
ऊंचाई : 140 पीएक्स ;
सीमा : 5 पीएक्स ठोस rgb ( 255 , 111 , 1 ) ;
डब्बे की छाया : इनसेट 4 पीएक्स 8 पीएक्स #f4af1b ;
मार्जिन छोड़ दिया : 350 पीएक्स ;
}
यह देखा जा सकता है कि हमने बॉक्स2 div को समान गुणों के साथ स्टाइल किया है:
बोनस टिप: HTML एलिमेंट पर मल्टीपल शैडो जोड़ना
' डब्बे की छाया ” संपत्ति का उपयोग HTML तत्व में कई छाया प्रभाव जोड़ने के लिए किया जा सकता है। यह प्रत्येक छाया के बीच अल्पविराम का उपयोग करके किया जा सकता है जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
डब्बे की छाया : 6 पीएक्स 6 पीएक्स rgb ( 91 , 0 , 143 ) , 12 पीएक्स 5 पीएक्स rgb ( 201 , 8 , 8 ) , 16 पीएक्स 16 पीएक्स 8 पीएक्स rgb ( 226 , 213 , 29 ) ;जैसा कि आप देख सकते हैं, कई छाया सफलतापूर्वक लागू की गई हैं:
यह सब CSS बॉर्डर शैडो के उपयोग के बारे में था।
निष्कर्ष
' डब्बे की छाया CSS में संपत्ति का उपयोग HTML तत्वों पर छाया प्रभाव लागू करने के लिए किया जाता है। इस संपत्ति में मुख्य रूप से दो मान होते हैं जो क्षैतिज ऑफ़सेट और लंबवत ऑफ़सेट के लिए होते हैं, लेकिन धुंधला प्रभाव, फैलाव त्रिज्या प्रभाव, रंग और अधिक जैसे कई मान हो सकते हैं। इसके अलावा, आप प्रत्येक बॉक्स-छाया संपत्ति के बीच अल्पविराम का उपयोग करके तत्वों में कई छाया भी जोड़ सकते हैं। इस लेख में व्यावहारिक उदाहरणों के साथ CSS बॉक्स-शैडो गुण की व्याख्या की गई है।