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

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

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

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

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

सीएसएस सिंटैक्स:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

क्षैतिज ऑफसेट: यदि क्षैतिज ऑफसेट सकारात्मक है, तो छाया बॉक्स के दाईं ओर होगी। और यदि क्षैतिज ऑफसेट ऋणात्मक है, तो छाया बॉक्स के बाईं ओर होगी।
लंबवत ऑफसेट: यदि ऊर्ध्वाधर ऑफसेट सकारात्मक है, तो छाया बॉक्स के नीचे होगी। और यदि लंबवत ऑफसेट नकारात्मक है, तो छाया बॉक्स के ऊपर होगी।
धुंधला त्रिज्या: मान जितना अधिक होगा, छाया उतनी ही धुंधली होगी।
प्रसार त्रिज्या: यह दर्शाता है कि छाया कितनी फैलनी चाहिए। सकारात्मक मूल्य छाया के प्रसार को बढ़ाते हैं, नकारात्मक मूल्य प्रसार को कम करते हैं।
रंग: यह छाया के रंग को दर्शाता है। साथ ही, यह rgba, hex, या hsla जैसे किसी भी रंग प्रारूप का समर्थन करता है।

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

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

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

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

आउटपुट:

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

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

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

आउटपुट:

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

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

किंडल फायर को एंड्रॉइड टैबलेट में बदलें

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

आउटपुट:

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

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

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

आउटपुट:

5. सभी तरफ स्प्रेड शैडो लगाएं

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

box-shadow: 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, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

आउटपुट:

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

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

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

आउटपुट:

8. ऊपर और बाईं ओर एक मंद बॉक्स-छाया जोड़ें, नीचे और दाईं ओर डार्क शैडो जोड़ें

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

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

आउटपुट:

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

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

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

आउटपुट:

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

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

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

आउटपुट:

सोशल क्लब का नाम कैसे बदलें

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

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

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

आउटपुट:

12. बॉक्स के नीचे और दाईं ओर एकाधिक रंगीन बॉर्डर शैडो जोड़ें

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

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

आउटपुट:

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

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

box-shadow: 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 16px;

आउटपुट:

CSS को HTML पेज के साथ एकीकृत करें

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

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

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

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

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

  
  
  
  
 CSS box-shadow  
  
 .heading {  
 text-align: center;  
 }  
 .image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
 }  
  
  
  
  
 Style 4

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

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

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

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

  
  
  
  
 CSS box-shadow  
  
  
  
 Style 4

बाहरी सीएसएस

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

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

.heading {  
 text-align: center;  
}  
.image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
}

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

निनटेंडो स्विच से कैसे स्ट्रीम करें

  
  
  
  
 CSS box-shadow  
  
  
  
  
 Style 4

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

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

CSS के साथ अपने वेबपेज को सुंदर बनाएं

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

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

साझा करना साझा करना कलरव ईमेल १० सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

सीएसएस के साथ मदद चाहिए? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों को आजमाएं, फिर उन्हें अपने वेब पेजों पर लागू करें।

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
वेब डिजाइन
सीएसएस

लेखक के बारे में युवराज चंद्र(60 लेख प्रकाशित)

युवराज दिल्ली विश्वविद्यालय, भारत में कंप्यूटर विज्ञान के स्नातक छात्र हैं। उन्हें फुल स्टैक वेब डेवलपमेंट का शौक है। जब वह नहीं लिख रहा होता है, तो वह विभिन्न तकनीकों की गहराई की खोज कर रहा होता है।

युवराज चंद्र की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें