프로필 사진 테두리에 그라데이션 효과 넣기

trick을 이용하여 테두리에 그라데이션, 애니메이션을 넣을 수 있다.

 

테두리가 될 그라데이션 이미지(ex : 100x100px)를 준비하고

 

프로필사진을 넣을 이미지(ex : 95x95px)를 준비한다.

 

 

95x95px

 

100x100px

 

그라데이션 이미지에 쓰일 색감은 아래 링크에서 참고해보자.

https://webkul.github.io/coolhue/

Gradient Colors Collection Palette - CoolHue 2.0

 

 

 

 

위와 같이 css를 이용하여 두 이미지를 겹치고 애니메이션을 적용하면 된다.

 

<div class="profile_wrapper">
    <div class="gradation_animate"></div>
    <div class="image_wrapper">
        <img class="image" src="https://blog.kakaocdn.net/dna/cxzhEK/btqzv6kQW0A/AAAAAAAAAAAAAAAAAAAAAEz9O0gLjInizbtsrsfembwXOUZJr_oxsrKYyY13hp8d/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=GAg7gEPMTO%2FhEezY7ak7mrl%2B2bo%3D">
    </div>
</div>

 

.profile_wrapper {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 15px 0 36px;
    position: relative;
}

.gradation_animate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(https://blog.kakaocdn.net/dna/BQFZF/btqzu7xZvy9/AAAAAAAAAAAAAAAAAAAAANTfYNzZ2N1Ln7VvPdfJe4l9I8bQNGzNunpOEwr9Rdrc/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xy3f607TTFnV5q3fHSnUhBaf1Ug%3D) no-repeat;
    animation: spin 1s linear infinite;
}

.image_wrapper {
    position: relative;
    overflow: hidden;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

.image {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
    height: 92px;
    min-width: 100%;
    min-height: 100%;
}