×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,045,665명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형

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

 

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

 

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

 

 

95x95px

 

100x100px

 

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

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

 

Gradient Colors Collection Palette - CoolHue 2.0

Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.

webkul.github.io

 

 

 

 

위와 같이 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%;
}

 

 

반응형