Back
A comprehensive guide to creating a polished user avatar with an online/offline status indicator using pure CSS.
<div class="avatar">
<div class="status"></div>
</div>
.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.<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
No comments yet. Be the first to comment!