কম্পিউটার টিউটোরিয়াল

CSS দিয়ে ইমেজে ভিজুয়াল ইফেক্ট যোগ করা


উদাহরণ

নিচের কোডটি CSS ফিল্টার ব্যবহার করে ইমেজে ভিজুয়াল ইফেক্ট (ইনভার্ট) যোগ করার উদাহরণ:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{ margin: 20px; } img.normal{ margin-left: 30%; width: 300px; height: 300px; } img.filter { width: 300px; height: 300px; filter: invert(100%); } </style> </head> <body> <h1 style="text-align: center;">CSS Image effects 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>

আউটপুট

উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে ইমেজে ভিজুয়াল ইফেক্ট যোগ করা

  1. CSS দিয়ে ইমেজে বর্ডার যোগ করা

  2. CSS দিয়ে ইমেজে বাটন যোগ করা

  3. CSS দিয়ে হোভারে ট্রানজিশন ইফেক্ট যোগ করা

  4. CSS object-fit ও object-position ব্যবহার করে ইমেজ ক্রপ করা