छवियों पर इनसेट बॉक्स-छाया मुद्दे को समझना

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

अदृश्य छाया का मामला

मूल प्रश्न में दिए गए उदाहरण पर विचार करें:

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

हालांकि लक्ष्य छवि सहित कंटेनर के चारों ओर एक इनसेट बॉक्स छाया लागू करना है, यह दिखाई देने में विफल रहता है। ऐसा क्यों होता है?

छवि पारदर्शिता का मुद्दा

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

पारदर्शिता बाधा पर काबू पाना

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

नीचे अद्यतन सीएसएस स्निपेट में, हम :after छद्म तत्व लागू करते हैं कंटेनर में तत्व:

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

इस संशोधन के साथ, इनसेट बॉक्स छाया अब छवि के अपारदर्शी और पारदर्शी दोनों क्षेत्रों पर दिखाई देती है, जिससे वांछित छाया प्रभाव मिलता है।