फ़िल्टर फ़ंक्शंस का उपयोग कंट्रास्ट, ब्राइटनेस, ह्यू रोटेशन, अपारदर्शिता, छवियों आदि जैसे तत्वों पर दृश्य प्रभाव सेट करने के लिए किया जाता है। आइए अब कुछ फ़िल्टर फ़ंक्शन देखें -
विपरीत
CSS में इमेज कंट्रास्ट सेट करने के लिए, फ़िल्टर कंट्रास्ट (%) का उपयोग करें। याद रखें, मान 0 छवि को काला बनाता है, 100% मूल छवि और डिफ़ॉल्ट के लिए है। बाकी, आप अपनी पसंद का कोई भी मान सेट कर सकते हैं, लेकिन 100% से ऊपर के मान छवि को अधिक कंट्रास्ट के साथ बनाएंगे।
उदाहरण
आइए अब CSS3 के साथ इमेज कंट्रास्ट को एडजस्ट करने के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html> आउटपुट
ड्रॉप शैडो
CSS3 में छवि में ड्रॉप शैडो जोड़ने के लिए, फ़िल्टर गुण के लिए ड्रॉप-शैडो मान का उपयोग करें। इसके निम्नलिखित मान हैं -
एच-छाया - क्षैतिज छाया के लिए पिक्सेल मान निर्दिष्ट करने के लिए।
वी-छाया - लंबवत छाया के लिए पिक्सेल मान निर्दिष्ट करने के लिए। नकारात्मक मान छाया को छवि के ऊपर रखते हैं।
धुंधला - छाया में धुंधला प्रभाव जोड़ने के लिए।
फैलें - सकारात्मक मूल्यों के कारण छाया फैलती है और नकारात्मक सिकुड़ती है।
रंग - छाया में रंग जोड़ने के लिए
उदाहरण
आइए अब एक और उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn 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 का उपयोग करके छवियों पर सेपिया प्रभाव लागू करने के लिए, फ़िल्टर गुण के लिए सेपिया मान का उपयोग करें। कोड इस प्रकार है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html> आउटपुट
