CSS만으로 랭킹 상위자 감도는 아바타 만들기

여러분, 랭킹 상위 유저의 아바타를 신성하게 하고 싶어지는 케이스는 자주 있죠? 👀
linear-gradient 를 사용하면 이미지를 사용하지 않고 좋은 느낌의 그라데이션이 걸리는 것 같기 때문에 이것을 사용합시다 💪✨

각 브라우저의 대응 상황

"IE9에 대응하지 않아?"
하나, 뭐라고 말하니? 그런 브라우저는 이미 멸종되었습니다. www 농담 www.


Can I use
h tp // 게으세요. 코 m / # 후아 t = cs-g 라 엔 ts

MDN
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / u b / Cs / ぃ 네아 rg 등 t # B w w r_

샘플 코드

html

<div class="avatar">
    <img src="avatar.jpg" />
</div>

scss

.avatar {
    background: linear-gradient(to bottom right, #fefd68, #a08001);
    border-radius: 50%;
    height: 82px;
    padding: 5px;
    width: 82px;

    img {
        background: #fff; /* 透過してる画像の対応 */
        border-radius: 50%;
        height: 100%;
        width: 100%;
    }
}

설명

border-radius: 50%; 에서 원을 만들어padding: 5px; 에서 이미지 외부에 5px 여백을 만듭니다.

배경에 linear-gradient를 지정해 완성입니다🤗
background: linear-gradient(to bottom right, #fefd68, #a08001);왼쪽 상단에서 오른쪽 하단으로 #fefd68에서 #a08001로 그라데이션을 추가합니다 📝

표시

잘 했어요👏👏👏