Back
Professional User Avatar with Status Indicator
A comprehensive guide to creating a polished user avatar with an online/offline status indicator using pure CSS.
HTML
The HTML structure is minimal and clean. We need a parent div element with the class "avatar" that contains a child div element with the class "status".
<div class="avatar">
<div class="status"></div>
</div>
CSS
Let's first style the avatar container using the "avatar" class. We'll create a square element with dimensions of 50x50 pixels and transform it into a perfect circle by setting the border-radius property to 50%. For the profile picture, we'll use a background image from a placeholder service and set background-size to cover to ensure the image fills the container properly. The position is set to relative, which establishes a positioning context for the status indicator.
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://i.pravatar.cc/200?img=48');
background-size: cover;
position: relative;
}
Now let's style the status indicator using the "status" class.
We'll create a small 12x12 pixel circle with a bright green background color (#4cd137) indicating the online status.
To make the indicator visually distinct, we'll add a 2-pixel white border around it.
Using absolute positioning, we'll place the status indicator in the bottom-right corner of the avatar by setting both bottom and right properties to 0.
We'll also add a short 0.1-second transition for a smooth animation when the status changes.
.status {
width: 12px;
height: 12px;
background-color: #4cd137;
border-radius: 50%;
border: 2px solid white;
position: absolute;
bottom: 0;
right: 0;
transition: 0.1s;
}
Finally, we'll create a style for the offline state by using a class selector combination of "status.offline".
When the user is offline, we'll simply change the background color to a red shade (#c23616).
.status.offline {
background-color: #c23616;
}
And that completes our professional user avatar with status indicator! To toggle between online and offline states, simply add or remove the "offline" class from the status div.Whole code
<div class="avatar">
<div class="status"></div>
</div>
<style>
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://i.pravatar.cc/200?img=48');
background-size: cover;
position: relative;
}
.status {
width: 12px;
height: 12px;
background-color: #4cd137;
border-radius: 50%;
border: 2px solid white;
position: absolute;
bottom: 0;
right: 0;
transition: 0.1s;
}
.status.offline {
background-color: #c23616;
}
</style>
Thank you for reading this article.
Comments