CSS `filter` প্রোপার্টি ব্যবহার করে ইমেজ বা এলিমেন্টে ব্লার, ব্রাইটনেস, কনট্রাস্ট, গ্রেস্কেল, ইনভার্ট, অপাসিটি, স্যাচুরেট ইত্যাদি ইফেক্ট দেওয়া যায়।
উদাহরণ: CSS3 ফিল্টার ইফেক্ট
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{ margin: 20px; width: 200px; height: 200px; }
img.normal{ margin-left: 30%; }
img.filter { filter: invert(100%); }
</style>
</head>
<body>
<h1 style="text-align: center;">CSS3 ফিল্টার ইফেক্ট উদাহরণ</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>
সাধারণ ফিল্টার ফাংশন
- blur(px): ব্লার ইফেক্ট।
- brightness(%): জ্যোতির্বস্ত্রতা (১০০% = নরমাল)।
- contrast(%): কনট্রাস্ট।
- grayscale(%): কালো-সাদা (১০০% = পুরোপুরি গ্রেস্কেল)।
- invert(%): রঙ উল্টিয়ে দেয় (১০০% = ফুল ইনভার্ট)।
- opacity(%): পারদর্শিতা।
- saturate(%): রঙের স্যাচুরেশন।
- drop-shadow(): বক্স শ্যাডোর মতো কিন্তু আকার অনুযায়ী।
কম্বাইন করা
`filter: grayscale(50%) blur(2px) contrast(150%);` মতো একসাথে একাধিক ফিল্টার ব্যবহার করা যায়।
