CSS এর ফিল্টার প্রপার্টিতে গ্রেস্কেল মান উল্লেখ করে আমরা একটি কালো এবং সাদা ছবি তৈরি করতে পারি। ফিল্টার প্রপার্টি ছবিগুলিতে ব্লার, ড্রপ-শ্যাডোর মতো বিশেষ প্রভাব প্রয়োগ করতে ব্যবহার করা যেতে পারে।
সিনট্যাক্স
CSS ফিল্টার সম্পত্তির সিনট্যাক্স নিম্নরূপ -
Selector {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি সিএসএস ফিল্টার বৈশিষ্ট্যকে চিত্রিত করে৷
৷<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
border-radius: 25%;
}
img:nth-of-type(even) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
}
img:nth-of-type(odd) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
