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

CSS দিয়ে অ্যাভাটার ইমেজ তৈরি


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে একটি অ্যাভাটার ইমেজ তৈরি করার উদাহরণ:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .avatarImage { vertical-align: middle; width: 250px; height: 250px; border-radius: 50%; border:3px solid black; margin: 10px; } </style> </head> <body> <h1>Avatar Images Example</h1> <img src="https://images.pexels.com/photos/2128807/pexels-photo-2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage"> <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage"> </body> </html>

আউটপুট

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

CSS দিয়ে অ্যাভাটার ইমেজ তৈরি

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

  2. CSS দিয়ে কার্ড তৈরি করার পদ্ধতি

  3. CSS দিয়ে কুপন তৈরি করার পদ্ধতি

  4. CSS দিয়ে অ্যারো (Arrow) তৈরি