কম্পিউটার

CSS3 ফিল্টার ইফেক্ট নিয়ে কাজ করা


CSS3 এ ফিল্টার ইফেক্ট সেট করতে, ফিল্টার প্রপার্টি ব্যবহার করুন। নিম্নলিখিত ফিল্টার প্রভাব সেট করা যেতে পারে -

blur() | brightness() | contrast() | grayscale() | invert() | opacity() | saturate() | url();

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 Filter effect example</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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

CSS3 ফিল্টার ইফেক্ট নিয়ে কাজ করা


  1. CSS3 2D ট্রান্সফর্ম ফাংশনের সাথে কাজ করা

  2. কিভাবে CSS3 ট্রানজিশন ইফেক্ট তৈরি করবেন?

  3. CSS3 3D ট্রান্সফর্ম ফাংশনের সাথে কাজ করা

  4. CSS3 এর সাথে একাধিক ব্যাকগ্রাউন্ড যোগ করা