CSS filter প্রপার্টিতে grayscale মান নির্দিষ্ট করে আমরা ব্ল্যাক অ্যান্ড হোয়াইট ছবি তৈরি করতে পারি। filter প্রপার্টি ব্যবহার করে ছবিতে blur, drop-shadow ইত্যাদি বিশেষ эффект যোগ করা যায়।
সিনট্যাক্স
CSS filter প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
Selector { filter: grayscale(100%); -webkit-filter: grayscale(100%); }উদাহরণ
নিচের উদাহরণগুলো CSS filter প্রপার্টি ব্যাখ্যা করে।
<!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>এটি নিচের আউটপুট দেয়:
