बॉक्स-शैडो के साथ सीएसएस-ओनली ओवरले इफेक्ट कैसे करें

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

एक सामान्य ओवरले है अर्द्ध पारदर्शी, के साथ ठोस पृष्ठभूमि रंग (आमतौर पर काला), और उपयोगकर्ताओं के साथ देखने या बातचीत करने के लिए इस पर कुछ पाठ या बटन होते हैं। इंटरैक्शन (क्लिक करना या होवर करना) होने के बाद, ओवरले हटा दिया जाता है और सामग्री को प्रकट करता है इसके नीचे.

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

अतिरिक्त HTML तत्वों को जोड़ने से बचें

ओवरले अक्सर बनते हैं एक अतिरिक्त HTML तत्व की स्थिति एक साथ अस्पष्टता मूल्य 1 से कम कवर किए जाने वाले तत्व के ठीक ऊपर. समस्या यह है कि इस तकनीक में ए का उपयोग शामिल है अतिरिक्त उपरिशायी के लिए तत्व (या छद्म तत्व).

यदि आप एक HTML आकार के पांडित्य नहीं हैं, तो ओवरले के लिए एक अतिरिक्त तत्व होना शायद एक बड़ी बात नहीं है, क्योंकि सबसे अधिक संभावना है कि यह किसी भी नेटवर्क के बैंडविड्थ पर ज्यादा टैक्स नहीं लगाएगा। हालांकि होने अलग तत्वों और उनके ओवरले के लिए शैली के नियम अभी भी सीएसएस पठनीयता और स्थिरता बनाए रखते हैं.

अपने कोड को क्रम में रखने के लिए, और अपने HTML की रूपरेखा को गड़बड़ाने के लिए नहीं, सीएसएस-केवल समाधान का उपयोग करना बेहतर विकल्प है.

के साथ ओवरले बनाएं डब्बे की छाया

तो आप वास्तव में CSS-over overlay कैसे बना सकते हैं? की मदद से डब्बे की छाया सीएसएस संपत्ति। बॉक्स-छाया इस काम के लिए एकदम सही है, क्योंकि एक ओवरले लेकिन क्या है एक तत्व पर एक अंधेरा छाया?

बॉक्स-छाया में एक संपत्ति मूल्य कहा जाता है इनसेट, जिसके कारण छाया दिखाई देती है बॉक्स के फ्रेम के अंदर.

एक इनसेट बॉक्स-छाया, जिसकी छाया का आकार आधा या आधे से अधिक होता है, तत्व की चौड़ाई और ऊंचाई, एक छाया बनाता है कवर करता है संपूर्ण तत्त्व.

 .बॉक्स चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; बॉक्स-छाया: हरा 0 0 0 100px इनसेट;  

चूंकि आमतौर पर ओवरले थोड़ी पारदर्शिता रखें, आपको इसे बॉक्स छाया में भी जोड़ना होगा। यह का उपयोग करके किया जा सकता है RGBA () छाया रंग के लिए कार्य.

आरजीबी आरजीबीए का हिस्सा, लाल, हरा और नीला रंग चैनल मूल्यों का प्रतिनिधित्व करता है, जबकि ए का प्रतिनिधित्व करता है अल्फा चैनल, जो है पारदर्शिता के लिए जिम्मेदार.

अल्फा चैनल के लिए, 1 का मान a बनाता है अपारदर्शी रंग, जबकि 0 एक बनाता है पूरी तरह से पारदर्शी रंग.

बॉक्स छाया के rgba रंग मान के अल्फा चैनल में 0 और 1 के बीच एक मान निर्दिष्ट करके, आप कर सकते हैं एक अर्ध-पारदर्शी ओवरले बनाएं.

डेमो के लिए कोड बनाएँ

हमारा डेमो विभिन्न पोकेमॉन की छवियों और नामों को दिखाएगा। यहाँ हम केवल Bulbasaur के लिए कोड बनाएंगे, डेमो में पहला पोकेमॉन, जैसा कि दूसरों को भी बनाया जाता है (कोडपेन पर आप उनके लिए भी कोड की जांच कर सकते हैं).

एचटीएमएल

HTML के लिए, हमें केवल करने की आवश्यकता है एक बॉक्स बनाएं जिसे हम CSS के साथ बाकी सब जोड़ देंगे.

सीएसएस

नीचे सीएसएस में, .पोकीमॉन तत्वों pokemon छवियों को प्रदर्शित करते हैं, और .पोकीमॉन :: के बाद छद्म तत्व पोकेमॉन का नाम लेते हैं.

के बाद से डब्बे की छाया संपत्ति कई मान ले सकते हैं के लिए कई छाया प्रस्तुत करना, ओवरले छाया के अलावा, मैंने ग्रे के अन्य छाया को भी जोड़ा .पोकीमॉन तथा .पोकीमॉन: मंडराना सौंदर्यशास्त्र के लिए तत्व.

 / * पोकेमॉन चित्र * / .Pokemon चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; / * फ्लेक्स बॉक्स का उपयोग कर केंद्र सामग्री * / प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; / * ओवरले * / बॉक्स-छाया: 0 0 0 100px इनसेट, 0 0 5px ग्रे; / * हॉवर-आउट संक्रमण * / संक्रमण: बॉक्स-छाया 1s;  / * पोकेमॉन नाम * / .Pokemon :: के बाद चौड़ाई: 80%; ऊंचाई: 80%; प्रदर्शन क्षेत्र; फ़ॉन्ट: 16pt 'बुकमैन पुराने केश'; सफ़ेद रंग; सीमा: 2px ठोस; पाठ-संरेखण: केंद्र; / * फ्लेक्स बॉक्स का उपयोग कर केंद्र सामग्री * / प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; / * संक्रमण बाहर मँडरा * / संक्रमण: अपारदर्शिता 1 s। 5 s;  / * होवर पर पोकेमॉन चित्र प्रकट करें * /। पोकेमॉन: हॉवर संक्रमण: बॉक्स-छाया 1 एस; बॉक्स-छाया: 0 0 0 5px इनसेट, 0 0 5px ग्रे, 0 0 10px ग्रे इनसेट;  / * हॉवर पर पोकेमॉन का नाम छिपाएं * / .Pokemon: hover :: के बाद संक्रमण: opp5s; अपारदर्शिता: 0;  

जब .पोकीमॉन तत्वों को मँडराया जाता है, उनकी बॉक्स-छाया को पीछे की छवि को प्रकट करने के लिए बदलने की आवश्यकता होती है.

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

आपने भी गौर किया होगा रंग मूल्यों की अनुपस्थिति ओवरले बॉक्स-छाया में .पोकीमॉन तथा .पोकीमॉन: मंडराना शैली के नियम। व्यक्तिगत पोकेमॉन के ओवरले बॉक्स-शैडो रंग को निर्दिष्ट करने की आवश्यकता है अपने स्वयं के अलग शैली के नियमों में, जैसा कि वे सभी एक दूसरे से अलग हैं.

जैसा डब्बे की छाया कोई भी लंबी संपत्ति नहीं है, आप इसकी छाया का रंग निर्धारित नहीं कर सकते व्यक्तिगत रूप से जैसा कुछ है, बॉक्स-छाया रंग; इसके बजाय - हम उपयोग करते हैं रंग संपत्ति.

डिफ़ॉल्ट रूप से, जब आप के लिए मान देते हैं रंग संपत्ति, वह मूल्य है सीमा, रूपरेखा और बॉक्स-छाया रंगों के लिए आवेदन किया गया भी। तो, आप बस का उपयोग कर सकते हैं रंग बॉक्स-छाया में रंग जोड़ने के लिए संपत्ति.

 # एम्बुलसौर पृष्ठभूमि-छवि: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * बॉक्स छाया रंग के लिए इस्तेमाल किया गया रंग मूल्य * / रंग: आरजीबीए (71, 121, 94, 0.9);  #bulbasaur :: के बाद / * पोकेमॉन नाम * / सामग्री: 'बुलबासौर';  

ओवरले छाया का रंग उपर्युक्त का उपयोग करता है RGBA () ओवरले को पारदर्शी बनाने के लिए अल्फा मान के लिए 0.9 के साथ कार्य करें.

ओवरले बॉक्स-छाया के रंग के अलावा, उपरोक्त सीएसएस उन नियमों को भी जोड़ता है जो प्रत्येक पोकेमॉन के लिए अलग-अलग हैं - छवि पृष्ठभूमि छवि और नाम.

और यह सब, हम अपने CSS- केवल रंगीन छवि ओवरले के साथ तैयार हैं। नीचे दिए गए पेन में सभी पोकेमॉन के कोड पर एक नज़र डालें.