상태 표시기가 있는 간단한 아바타 - CSS만 해당 - 단계별 자습서

CSS만 사용하여 상태 표시기가 있는 간단한 아바타를 만드는 방법에 대한 자습서입니다.

HTML

HTML의 경우 "avatar"클래스가 포함된 하나의 div 요소와 "status"요소가 포함된 span 요소가 필요합니다. 이 요소는 상태를 나타냅니다.

기본값은 오프라인이며 "활성"클래스를 추가하면 상태 표시기가 녹색이 됩니다.

지금은 여기에 "활성"클래스를 추가합니다.

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

상태 표시기는 반경이 50%로 설정된 어두운 테두리가 있는 6x6픽셀 크기이며 원을 형성합니다.

위치를 절대값으로 설정하고 top 및 right를 0으로 설정하고 transform translate를 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);
}

이제 "활성"클래스의 스타일을 지정합니다.

이 클래스는 상태 요소에 추가됩니다.

background-color 속성을 재정의하고 녹색으로 설정합니다.

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

그리고 그게 다야.

오프라인일 때 상태 요소에서 "활성"클래스를 제거하고 온라인일 때 추가하기만 하면 됩니다.

전체 코드here가 포함된 비디오 자습서를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️