Simple avatar with status indicator - CSS only - A step-by-step tutorial

Tutorial on how to create a simple avatar with status indicator using only CSS.

HTML

For HTML, we need only one div element with "avatar" class and a span element inside with "status" element. This element will indicate status.

Default value will be offline, by adding the "active" class to it, the status indicator will become green.

For now, we'll add an "active" class to it.

<div class="avatar">
    <span class="status active"></span>
</div>

CSS

For CSS, first we'll style the avatar.

We'll set it's width and height to 40x40 px.

A little rounded border of 3px width, solid dark blue.

We'll set it's position to relative.

And, of course, the image. We'll set the background image to url image, and it's size to cover the whole 40x40 area, with position set to center.

.avatar {
    width: 40px;
    height: 40px;
    border: 3px rgb(48, 69, 96) solid;
    border-radius: 6px;
    position: relative;
    background-image: url('https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg.jpg');
    background-size: cover;
    background-position: center;
}

Our status indicator will be 6x6 pixels size with a dark border with radius set to 50%, which will form a circle.

We'll set it's position to absolute, and with top and right set to 0 with transform translate set to 40% and -40%, it will be positioned in the top right corner.

Lastly, we'll set it's background to dark grey. This is the look of offline status. The default one.

.status {
    width: 6px;
    height: 6px;
    border: 2px solid rgb(48, 69, 96);
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translate(40%, -40%);
    background-color: rgb(33, 34, 35);
}

Now we'll style the "active" class.

This class we'll be appended to a status element.

We'll just override the background-color property, and set it to green.

.active {
    background-color: rgb(48, 249, 75);
}

And that's it.

Simply remove the "active" class from the status element when offline and add it when online.

You can find video tutorial with full code here.

Thanks for reading. ❤️

Comments

[Maame Afia Fordjour]

Saving this for later.