An avatar is a visual representation of a user or a brand.
It is commonly used in social media, forums, and websites to make it easy for people to recognize and remember the user or brand.
Avatars are usually displayed in a circular shape, but you can create them in different shapes using CSS.
In this tutorial, we will discuss how to create a circular avatar image with CSS.
Step 1: HTML Markup
The first step in creating an avatar image with CSS is to add the HTML markup.
For our avatar, we will use an HTML image tag with a class name “avatar.”
<img src="avatar.jpg" alt="Avatar Image" class="avatar">
Step 2: CSS Styling
In the next step, we will add the CSS styling to make the avatar image circular.
For this, we will use the border-radius property and set it to 50%.
.avatar {
border-radius: 50%;
}
Step 3: Adding Border
To make the avatar image stand out, you can add a border to it.
You can use the border property to specify the border width, style, and color.
.avatar {
border-radius: 50%;
border: 2px solid #333;
}Step 4: Setting Width and Height
In this step, we will set the width and height of the avatar image.
You can set the width and height to any value, but to maintain the circular shape, the width and height should be equal.
.avatar {
border-radius: 50%;
border: 2px solid #333;
width: 100px;
height: 100px;
}Step 5: Making the Image Responsive
To make the avatar image responsive, we will use media queries to adjust the width and height based on the screen size.
@media (max-width: 600px) {
.avatar {
width: 50px;
height: 50px;
}
}Conclusion
In this tutorial, we discussed how to create a circular avatar image with CSS.
We started with HTML markup, added the CSS styling to make it circular, added a border, set the width and height, and made it responsive using media queries.
You can use this as a starting point and make modifications based on your requirements.
