带有状态指示器的简单头像 - 仅 CSS - 分步教程

有关如何仅使用 CSS 创建带有状态指示器的简单头像的教程。

超文本标记语言

对于 HTML，我们只需要一个带有“avatar”类的 div 元素和一个带有“status”元素的 span 元素。该元素将指示状态。

默认值为离线，通过添加“active”类，状态指示器将变为绿色。

现在，我们将向其添加一个“活动”类。

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

CSS

对于 CSS，首先我们将设置头像的样式。

我们将其宽度和高度设置为 40x40 像素。

3px 宽的小圆形边框，纯深蓝色。

我们将其位置设置为相对位置。

当然，还有图像。我们将背景图片设置为 url 图片，其大小覆盖整个 40x40 区域，位置设置为中心。

.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;
}

我们的状态指示器大小为 6x6 像素，带有深色边框，半径设置为 50%，形成一个圆圈。

我们将其位置设置为绝对位置，并将顶部和右侧设置为 0，将变换平移设置为 40% 和 -40%，它将位于右上角。

最后，我们将其背景设置为深灰色。这是离线状态的样子。默认的。

.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);
}

现在我们将设计“活动”类的样式。

我们将把这个类附加到一个状态元素上。

我们只需覆盖背景颜色属性，并将其设置为绿色。

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

就是这样。

只需在离线时从状态元素中删除“活动”类，并在在线时添加它。