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

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://k.kakaocdn.net/dn/cxzhEK/btqzv6kQW0A/3UIhw0S52V3kPK0QTEHPT0/img.png">
    </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://k.kakaocdn.net/dn/BQFZF/btqzu7xZvy9/p3qATq2IbK4edXbUm76pTK/img.png) 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%;
}