CSS3 का उपयोग करके इमेजेज में ड्रॉप शैडो जोड़ना

फिल्टर प्रॉपर्टी के साथ ड्रॉप शैडो

CSS3 में इमेज पर ड्रॉप शैडो जोड़ने के लिए, filter प्रॉपर्टी के लिए drop-shadow मान का उपयोग करें।

ड्रॉप शैडो पैरामीटर्स:

• h-shadow: क्षैतिज शैडो के लिए पिक्सेल मान (आवश्यक)
• v-shadow: लंबवत शैडो के लिए पिक्सेल मान (आवश्यक)। नकारात्मक मान शैडो को इमेज के ऊपर रखते हैं।
• blur: शैडो में ब्लर इफेक्ट जोड़ने के लिए (वैकल्पिक)
• spread: शैडो को फैलाने/सिकोड़ने के लिए (वैकल्पिक)। पॉजिटिव मान फैलाते हैं, नकारात्मक सिकोड़ते हैं।
• color: शैडो में रंग जोड़ने के लिए (वैकल्पिक)

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(120%);
  filter: contrast(120%);
  filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>MySQL सीखें</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>MySQL सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

आउटपुट

पहली इमेज मूल है, दूसरी इमेज पर हरा ड्रॉप शैडो (10px दाएं, 10px नीचे, 10px ब्लर) के साथ ब्राइटनेस और कंट्रास्ट बढ़ाया गया है।

महत्वपूर्ण नोट:

filter प्रॉपर्टी में कई फंक्शन्स चेन किए जा सकते हैं, लेकिन ऊपर दिए उदाहरण में प्रत्येक filter डिक्लेरेशन पिछले को ओवरराइड कर देगा। सही तरीका:

img.demo {
  filter: brightness(120%) contrast(120%) drop-shadow(10px 10px 10px green);
}

ड्रॉप शैडो vs बॉक्स शैडो: