सीएसएस बॉक्स-शैडो का उपयोग कैसे करें: 13 ट्रिक्स और उदाहरण

CSS एक वेबपेज को स्टाइल करने के लिए भाषा डेवलपर्स का उपयोग है। यह नियंत्रित करता है कि HTML तत्व स्क्रीन पर, कागज पर या मीडिया के किसी अन्य रूप में कैसे प्रदर्शित किए जाते हैं। CSS आपकी अपनी छवि में वेबपेज को स्टाइल करने के लिए पूर्ण अनुकूलन शक्ति प्रदान करता है।

आप सीएसएस का उपयोग करके एक तत्व की पृष्ठभूमि का रंग, फ़ॉन्ट शैली, फ़ॉन्ट रंग, बॉक्स-छाया, मार्जिन और कई अन्य गुण बदल सकते हैं। हम आपको इस गाइड में बॉक्स-शैडो के कुछ प्रभावी उपयोगों के माध्यम से चलेंगे।

CSS बॉक्स-छाया क्या है?

डब्बे की छाया प्रॉपर्टी का इस्तेमाल HTML एलिमेंट्स के लिए शैडो लगाने के लिए किया जाता है। यह स्टाइल बॉक्स या छवियों के लिए सबसे अधिक इस्तेमाल किया जाने वाला CSS गुणों में से एक है।

CSS सिंटैक्स:

बॉक्स-छाया: [क्षैतिज ऑफसेट] [ऊर्ध्वाधर ऑफसेट] [धुंधला त्रिज्या] [वैकल्पिक प्रसार त्रिज्या] [रंग];

1. क्षैतिज ऑफसेट: यदि क्षैतिज ऑफसेट सकारात्मक है, तो छाया बॉक्स के दाईं ओर होगी। और अगर क्षैतिज ऑफसेट नकारात्मक है, तो छाया बॉक्स के बाईं ओर होगी।
2. ऊर्ध्वाधर ऑफसेट: यदि ऊर्ध्वाधर ऑफसेट सकारात्मक है, तो छाया बॉक्स के नीचे होगी। और यदि ऊर्ध्वाधर ऑफसेट नकारात्मक है, तो छाया बॉक्स के ऊपर होगी।
instagram viewer
3. धब्बा त्रिज्या: मूल्य जितना अधिक होगा, छाया उतनी ही धुंधली होगी।
4. प्रसार त्रिज्या: यह दर्शाता है कि छाया को कितना फैलाना चाहिए। सकारात्मक मूल्य छाया के प्रसार को बढ़ाते हैं, नकारात्मक मूल्यों के प्रसार को कम करते हैं।
5. रंग: यह छाया के रंग को दर्शाता है। इसके अलावा, यह आरजीबीए, हेक्स या एचएसएलए जैसे किसी भी रंग प्रारूप का समर्थन करता है।

धब्बा, प्रसार और रंग पैरामीटर वैकल्पिक हैं। बॉक्स-शैडो का सबसे दिलचस्प हिस्सा यह है कि आप किसी भी समय किसी भी बॉक्स-शैडो वैल्यू को अलग करने के लिए अल्पविराम का उपयोग कर सकते हैं। इसका उपयोग तत्वों पर कई सीमाओं और छाया बनाने के लिए किया जा सकता है।

1. बॉक्स के बाएँ, दाएँ और नीचे एक डिम बॉक्स-छाया जोड़ें

आप अपने बॉक्स HTML सीएसएस के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के तीन किनारों (बाएं, दाएं और नीचे) में बहुत मंद छाया जोड़ सकते हैं:

बॉक्स-छाया: आरजीबीए (149, 157, 165, 0.2) 0px 8px जीपीएक्स;

आउटपुट:

2. सभी पक्षों पर एक डिम बॉक्स-छाया जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के सभी किनारों पर प्रकाश छाया जोड़ सकते हैं:

बॉक्स-छाया: आरजीबीए (100, 100, 111, 0.2) 0px 7px 29px 0px;

आउटपुट:

3. नीचे और दाएं पक्षों पर पतली बॉक्स-छाया जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के नीचे और दाईं ओर छाया जोड़ सकते हैं:

बॉक्स-छाया: आरजीबीए (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

आउटपुट:

4. सभी पक्षों के लिए एक डार्क बॉक्स-छाया जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के सभी किनारों पर अंधेरे छाया जोड़ सकते हैं:

बॉक्स-छाया: आरजीबीए (0, 0, 0, 0.35) 0px 5px 15px;

आउटपुट:

5. सभी पक्षों में छाया को जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित कमांड का उपयोग करके बॉक्स के सभी किनारों पर प्रसार छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0), 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

आउटपुट:

6. सभी पक्षों पर एक पतली सीमा छाया जोड़ें

आप अपने लक्ष्य HTML तत्व के साथ निम्नलिखित सीएसएस का उपयोग करके बॉक्स के सभी किनारों पर एक साधारण सीमा छाया जोड़ सकते हैं:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, 2g, (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inset;

आउटपुट:

7. बॉटम और लेफ्ट साइड्स में एक बॉक्स-शैडो जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के नीचे और बाएं हिस्से में एक छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

आउटपुट:

8. टॉप और लेफ्ट साइड्स के लिए डिम बॉक्स-शैडो लगाएं, डार्क शैडो को बॉटम और राइट साइड्स में

आप अपने लक्षित HTML तत्व के साथ निम्नलिखित CSS का उपयोग करके बॉक्स के नीचे और दाईं ओर एक अंधेरा छाया के साथ-साथ बॉक्स के ऊपर और बाईं ओर एक हल्की छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

आउटपुट:

9. सभी पक्षों पर एक पतली, रंगीन सीमा छाया जोड़ें

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के सभी किनारों पर एक साधारण रंगीन बॉर्डर छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

आउटपुट:

10. बॉक्स के निचले और बाएँ साइड्स में कई रंगीन बॉर्डर छाया जोड़ें

आप अपने लक्षित HTML तत्व के साथ निम्नलिखित सीएसएस का उपयोग करके बॉक्स के नीचे और बाईं ओर कई रंगीन बॉर्डर छाया जोड़ सकते हैं:

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px इनसेट, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px इनसेट;

आउटपुट:

11. बॉटम में कई कलर्ड बॉर्डर शैडो लगाएं

आप अपने लक्ष्य एचटीएमएल तत्व के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बॉक्स के निचले भाग में कई रंगीन बॉर्डर छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rbba (240, 46, 170), 0.1) 0px 20px, rgba (240, 46, 170, 0.05) 0px 25px;

आउटपुट:

12. बॉक्स के बॉटम और राइट साइड्स में मल्टीपल कलर्ड बॉर्डर शैडो लगाएं

आप अपने लक्षित HTML तत्व के साथ निम्नलिखित सीएसएस का उपयोग करके बॉक्स के नीचे और दाएं किनारों पर कई रंगीन बॉर्डर छाया जोड़ सकते हैं:

बॉक्स-छाया: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rbba (240, 46, 170), 0.1) 20px 20px, rgba (240, 46, 170, 0.05) 25px 25px;

आउटपुट:

13. लेफ्ट और राइट साइड्स में लाइट शैडो लगाएं, नीचे तक शैडो फैलाएं

आप अपने टार्गेट HTML एलिमेंट के साथ निम्नलिखित बॉक्स-शैडो सीएसएस का उपयोग करके बायीं और दायीं ओर हल्की परछाइयों को जोड़ सकते हैं और बायीं ओर छाया फैला सकते हैं:

बॉक्स-छाया: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09): 0px 8px 4px, rgba (0,) 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px; mpx;

आउटपुट:

HTML पेज के साथ CSS को इंटीग्रेट करें

अब आप जानते हैं कि CSS का उपयोग करके कूल बॉक्स-शैडो इफ़ेक्ट कैसे जोड़े जाते हैं, आप उन्हें HTML तत्वों के साथ कई तरीकों से आसानी से एकीकृत कर सकते हैं।

सम्बंधित: 11 सीएसएस फ़ाइलों की जांच, सफाई और अनुकूलन के लिए उपयोगी उपकरण

आप इसे स्वयं HTML पेज में एम्बेड कर सकते हैं या इसे एक अलग दस्तावेज़ के रूप में संलग्न कर सकते हैं। HTML डॉक्यूमेंट में CSS को शामिल करने के तीन तरीके हैं:

आंतरिक सीएसएस

एंबेडेड या आंतरिक स्टाइल शीट्स के भीतर डाला जाता है का उपयोग कर एक HTML दस्तावेज़ का अनुभाग तत्व। आप कोई भी नंबर बना सकते हैं एक HTML दस्तावेज़ में तत्व, लेकिन वे के बीच संलग्न होना चाहिए तथा टैग। HTML डॉक्यूमेंट के साथ आंतरिक CSS का उपयोग कैसे करें, इसका उदाहरण यहां दिया गया है:

शैली ४

इनलाइन सीएसएस

इनलाइन सीएसएस का उपयोग HTML तत्व में अद्वितीय शैली नियम जोड़ने के लिए किया जाता है। इसका उपयोग HTML तत्व के साथ किया जा सकता है अंदाज विशेषता। शैली विशेषता में सीएसएस गुण होते हैं "संपत्ति मूल्य" अर्धविराम द्वारा अलग किया गया (;).

सम्बंधित: सीएसएस ग्रिड के साथ दो-आयामी वेबसाइट बनाने का तरीका जानें

सभी सीएसएस गुण एक लाइन में होने चाहिए यानी सीएसएस संपत्तियों के बीच कोई लाइन ब्रेक नहीं होना चाहिए। यहां एक उदाहरण दिखाया गया है कि HTML डॉक्यूमेंट के साथ इनलाइन सीएसएस का उपयोग कैसे करें:

शैली ४

बाहरी सीएसएस

HTML दस्तावेजों में शैलियों को लागू करने के लिए बाहरी सीएसएस सबसे आदर्श तरीका है। एक बाहरी शैली पत्रक में एक अलग दस्तावेज़ (.css फ़ाइल) में सभी शैली नियम होते हैं, यह दस्तावेज़ तब HTML दस्तावेज़ का उपयोग करके लिंक किया जाता है टैग। यह विधि HTML दस्तावेज़ों में शैलियों को परिभाषित करने और लागू करने के लिए सबसे अच्छी विधि है क्योंकि प्रभावित HTML फ़ाइल को मार्कअप में न्यूनतम परिवर्तनों की आवश्यकता होती है। एक HTML दस्तावेज़ के साथ बाहरी सीएसएस का उपयोग करने के तरीके को प्रदर्शित करने वाला एक उदाहरण यहां दिया गया है:

के साथ एक नई सीएसएस फ़ाइल बनाएँ सीएसएस विस्तार। अब उस फ़ाइल के अंदर निम्नलिखित सीएसएस कोड जोड़ें:

।
पाठ-संरेखित करें: केंद्र;
}
.image- बॉक्स {
प्रदर्शन क्षेत्र;
मार्जिन-वाम: ऑटो;
मार्जिन-राइट: ऑटो;
बॉक्स-छाया: आरजीबीए (0, 0, 0, 0.35) 0px 5px 15px;
}

अंत में, एक HTML दस्तावेज़ बनाएं और उस दस्तावेज़ के अंदर निम्न कोड जोड़ें:

शैली ४

ध्यान दें कि CSS फ़ाइल HTML दस्तावेज़ के माध्यम से लिंक की गई है टैग और href विशेषता।

उपरोक्त सभी तीन तरीके (आंतरिक सीएसएस, इनलाइन सीएसएस और बाहरी सीएसएस) एक ही आउटपुट प्रदर्शित करेंगे-

सीएसएस के साथ अपने वेबपेज को सुरुचिपूर्ण बनाएं

CSS का उपयोग करके आप अपने वेबपेज की स्टाइलिंग पर पूर्ण नियंत्रण रखते हैं। आप विभिन्न CSS गुणों का उपयोग करके प्रत्येक HTML तत्व को अनुकूलित कर सकते हैं। सीएसएस अपडेट में दुनिया भर के देवता योगदान दे रहे हैं, और वे 1996 में रिलीज होने के बाद से ऐसा कर रहे हैं। जैसे, शुरुआती लोगों को बहुत कुछ सीखना है!

सौभाग्य से, सीएसएस शुरुआत के अनुकूल है। आप कुछ सरल आदेशों के साथ शुरुआत करके और अपनी रचनात्मकता आपको ले जाने के द्वारा कुछ उत्कृष्ट अभ्यास प्राप्त कर सकते हैं।

10 सरल सीएसएस कोड उदाहरण आप 10 मिनट में सीख सकते हैं

CSS का उपयोग करने के बारे में अधिक जानना चाहते हैं? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों की कोशिश करें, फिर उन्हें अपने स्वयं के वेब पृष्ठों पर लागू करें।

आगे पढ़िए

लेखक के बारे में