CSS3 फ़िल्टर फ़ंक्शन समझना

फ़िल्टर फ़ंक्शंस का उपयोग तत्वों पर दृश्य प्रभाव सेट करने के लिए किया जाता है जैसे कंट्रास्ट, ब्राइटनेस, ह्यू रोटेशन, अपारदर्शिता, इमेजेज पर, आदि। आइए कुछ फ़िल्टर फ़ंक्शन्स देखें।

कंट्रास्ट

CSS में इमेज कंट्रास्ट सेट करने के लिए, filter: contrast(%) उपयोग करें। याद रखें, मान 0 इमेज को काला बनाता है, 100% मूल इमेज और डिफ़ॉल्ट के लिए है। बाकी, आप अपनी पसंद का कोई भी मान सेट कर सकते हैं, लेकिन 100% से ऊपर के मान इमेज को अधिक कंट्रास्ट के साथ बनाएंगे।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      img.demo { 
        filter: brightness(120%); 
        filter: contrast(120%); 
      } 
    </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> 
    <p>नीचे दी गई इमेज ऊपर की मूल इमेज से अधिक ब्राइट और अधिक कंट्रास्ट वाली है।</p> 
    <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> 
  </body> 
</html>

आउटपुट

CSS3 फ़िल्टर फ़ंक्शन समझना

ड्रॉप शैडो

CSS3 में इमेज पर ड्रॉप शैडो जोड़ने के लिए, फ़िल्टर प्रॉपर्टी के लिए 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>

आउटपुट

CSS3 फ़िल्टर फ़ंक्शन समझना

सीपिया प्रभाव

CSS3 का उपयोग करके इमेजेज पर सीपिया प्रभाव लागू करने के लिए, फ़िल्टर प्रॉपर्टी के लिए sepia मान उपयोग करें।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      img.demo { filter: sepia(100%); } 
    </style> 
  </head> 
  <body> 
    <h1>स्प्रिंग फ्रेमवर्क सीखें</h1> 
    <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="स्प्रिंग फ्रेमवर्क" width="160" height="150"> 
    <h1>स्प्रिंग फ्रेमवर्क सीखें</h1> 
    <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="स्प्रिंग फ्रेमवर्क" width="160" height="150"> 
  </body> 
</html>

आउटपुट

CSS3 फ़िल्टर फ़ंक्शन समझना

अन्य फ़िल्टर्स: grayscale() (ग्रेस्केल), blur() (ब्लर), brightness(), contrast(), hue-rotate() (ह्यू घुमाव), invert() (रंग उल्टा), opacity(), saturate() (संतृप्ति)। एकाधिक फ़िल्टर्स स्पेस से अलग करके चेन किए जा सकते हैं: filter: grayscale(50%) blur(2px);।