কম্পিউটার

কিভাবে 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. কিভাবে সিএসএস দিয়ে একটি ছবিতে একটি বোতাম যোগ করবেন?

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

  4. CSS-এ অবজেক্ট-ফিট এবং অবজেক্ট-পজিশন সহ ছবি ক্রপ করুন