Di bawah ini kita akan mempelajari cara membuat gambar avatar(Avatar Image) dengan CSS.
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; } </style> </head> <body> <h2>Avatar Images</h2> <img src="https://dosenit.com/wp-content/uploads/2021/01/hqdefault.jpg" alt="Avatar" class="avatar"> <img src="https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png" alt="Avatar" class="avatar"> <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Avatar" class="avatar"> <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="avatar"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Avatar" class="avatar"> </body> </html>
Cara Membuat Gambar Avatar
Berikut ini beberapa langka yang bisa dilakukan untuk membuat avatar image(gambar avatar)
Langkah 1) Tambahkan HTML:
Contoh
<img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Avatar" class="avatar">
Langkah 2) Tambahkan CSS:
Setel height dan weight yang cocok agar terlihat bagus, dan gunakan properti border-radius untuk menambahkan sudut membulat ke gambar. 50% akan membuat gambar melingkar:
Contoh
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}