ফিল্টার ফাংশনগুলো এলিমেন্টে কনট্রাস্ট, ব্রাইটনেস, হিউ রোটেশন, অপাসিটি ইত্যাদি ভিজ্যুয়াল ইফেক্ট যোগ করতে ব্যবহৃত হয়। কিছু ফিল্টার ফাংশন দেখি:
কনট্রাস্ট
CSS-এ ইমেজ কনট্রাস্ট সেট করতে filter: contrast(%) ব্যবহার করুন। মনে রাখবেন, মান ০ ইমেজকে কালো করে, ১০০% মূল ইমেজ এবং ডিফল্ট। বাকি আপনার পছন্দমতো মান দিন, কিন্তু ১০০% এর বেশি মান ইমেজকে আরও কনট্রাস্টি করবে।
উদাহরণ
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>নিচের ইমেজটি উপরের মূল ইমেজের চেয়ে daha উজ্জ্বল এবং বেশি কনট্রাস্টযুক্ত।</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
আউটপুট
ড্রপ শ্যাডো
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>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-এ ইমেজে সেপিয়া ইফেক্ট যোগ করতে filter প্রপার্টির জন্য sepia মান ব্যবহার করুন। কোড নিম্নরূপ:
উদাহরণ
<!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>
আউটপুট
