하나의 요소만 사용하는 아름다운 금빛 아바타 - 단계별 튜토리얼

하나의 요소만 사용하여 아름다운 황금 아바타를 만드는 방법에 대한 튜토리얼입니다.

HTML

HTML의 경우 "avatar"클래스가 있는 div 요소 하나만 필요합니다.

<div class="avatar"></div>

CSS
CSS의 경우 먼저 "아바타"클래스의 스타일을 지정합니다.

너비와 높이는 100x100 픽셀로 설정하고 테두리는 10px 금색 단색으로 설정합니다.

그냥 구글에서 찾은 배경 이미지를 설정하고 덮을 크기를 설정하겠습니다.

원을 형성하려면 border-radius 속성을 50%로 설정하기만 하면 됩니다.
마지막으로 위치를 상대 위치로 설정합니다.

.avatar {
    width: 100px;
    height: 100px;
    border: 10px solid #d0ab35;
    background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
    background-size: cover;
    border-radius: 50%;
    position: relative;
}

이제 이전 의사 요소의 스타일을 지정합니다.

내용과 위치를 절대값으로 설정하고 위쪽, 아래쪽, 왼쪽 및 오른쪽은 -16픽셀로 설정합니다.

이것은 이 요소가 div "아바타"요소보다 모든 면에서 16픽셀 더 크다는 것을 의미합니다.

테두리 반경을 50%로 설정하여 원을 형성합니다.

이제 배경 이미지를 아름다운 금색 색상의 선형 그래디언트로 설정합니다.

clip-path 속성을 사용하여 위쪽과 오른쪽에 하나씩 두 개의 사각형을 잘라냅니다.

z-index 속성을 -1로 설정하면 이 요소는 "avatar"div 요소 아래로 이동하고 16픽셀 너비의 테두리처럼 보입니다.

.avatar:before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -16px;
    right: -16px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
    z-index: -1;
}

이제 가상 요소 이후의 스타일을 지정합니다.
내용과 위치를 절대값으로 설정하고 위쪽, 아래쪽, 왼쪽 및 오른쪽을 -11픽셀로 설정합니다.
이것은 이 요소가 "아바타"div 요소의 모든 측면에서 11픽셀보다 크고 이전 유사 요소보다 5픽셀 작다는 것을 의미합니다.
원을 형성하기 위해 반지름이 50%인 4픽셀로 단색 흰색 테두리를 설정합니다.

.avatar:after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -11px;
    right: -11px;
    border: 4px solid #fff;
    border-radius: 50%;
}

그리고 그게 다야.

비디오 자습서 및 전체 코드here를 찾을 수 있습니다.

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