CSS 소셜 아이콘 만들기 > CSS

CSS를 활용하여 소셜 아이콘을 만들어 보겠습니다.

 

보통은 일러스트 또는 포토샵으로 만들어 이미지를 활용하는 경우가 많은데… 오늘은 폰트어썸과 CSS를 활용하여 간단하게 소셜 아이콘을 만들어 보도록 하겠습니다.

 

아래 링크를 클릭하면 예제를 보실 수 있습니다.

 

http://theme.eyoom.net/study/css/social_icon_1/index.html

 

본문 상단의 첨부한 파일을 다운받아 social_icon_1 폴더내 index.html 파일을 브라우저로 열어보면 동일한 화면이 출력됩니다.

 

index.html 파일을 열어보면

 

<div class="social-icon-wrap">
    <div class="social-icon social-facebook"><i class="fa fa-facebook"></i></div>
    <div class="social-icon social-twitter"><i class="fa fa-twitter"></i></div>
    <div class="social-icon social-google-plus"><i class="fa fa-google-plus"></i></div>
    <div class="social-icon social-instagram"><i class="fa fa-instagram"></i></div>
    <div class="social-icon social-youtube"><i class="fa fa-youtube"></i></div>
    <div class="social-icon social-tumblr"><i class="fa fa-tumblr"></i></div>
    <div class="social-icon social-behance"><i class="fa fa-behance"></i></div>
    <div class="social-icon social-pinterest"><i class="fa fa-pinterest-p"></i></div>
</div>

 

html 소스를 볼수 있습니다.

 

그리고 아래 CSS 스타일 설정이 있습니다.

 

body {
    background: #e5e5e5;
}
 
.social-icon-wrap {
    width: 550px;
    margin: 100px auto;
}
 
.social-icon {
    float: left;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 2px 0px rgba(255,255,255,0.4) inset, 0 -2px 0px rgba(0,0,0,0.5) inset;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}
 
.social-icon i {
    display: block;
    z-index: 1;
    color: #fff;
    line-height: 100px;
    font-size: 60px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
 
.social-icon:hover {
    transform: translate(0, -10px);
}
 
.social-facebook {
    background: linear-gradient(rgb(88, 128, 219), rgb(57, 85, 151));
}
 
.social-twitter {
    background: linear-gradient(rgb(0, 183, 255), rgb(0, 111, 245));
}
 
.social-google-plus {
    background: linear-gradient(rgb(254, 58, 47), rgb(221, 6, 4));
}
 
.social-instagram {
    background: linear-gradient(rgb(255, 155, 14), rgb(215, 66, 0));
}
 
.social-youtube {
    background: linear-gradient(rgb(255, 35, 115), rgb(225, 12, 53));
}
 
.social-tumblr {
    background: linear-gradient(rgb(78, 240, 252), rgb(49, 153, 200));
}
 
.social-behance {
    background: linear-gradient(rgb(0, 146, 255), rgb(0, 86, 255));
}
 
.social-pinterest {
    background: linear-gradient(rgb(242, 71, 77), rgb(189, 32, 38));
}

 

잘 모르시는 분들을 위하여 각각의 클래스 스타일 설정을 설명드리면...

 

 

.social-icon 클래스의 설정들은 아이콘 박스의 스타일입니다.

 

• 넓이 width: 100px
• 높이 height: 100px
• 테두리곡선 border-radius: 15px
• 박스쉐도우 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 2px 0px rgba(255,255,255,0.4) inset, 0 -2px 0px rgba(0,0,0,0.5) inset
• 변화 시간 transition: 0.2s ease-in-out

 

박스쉐도우의 처음 0 2px 5px rgba(0, 0, 0, 0.3) 는 아이콘박스의 외부 그림자 효과이며, 0 2px 0px rgba(255,255,255,0.4) inset 은 아이콘박스의 상단 내부 그림자 효과, 그리고 0 -2px 0px rgba(0,0,0,0.5) inset 은 아이콘박스의 하단 내부 그림자 효과입니다.

 

 

.social-icon i 클래스의 설정들은 아이콘 박스 내 폰트어썸 아이콘의 스타일입니다.

 

• 색상 color: #fff
• 폰트크기 font-size: 60px
• 텍스트쉐도우 text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);

 

 

.social-icon:hover 클래스의 설정은 마우스온시 변하는 스타일입니다.

 

• 상단으로 10px 이동 transform: translate(0, -10px);

 

 

.social-소셜서비스명 클래스는 아이콘 박스의 색상을 나타냅니다.

 

• 아이콘박스 색상 background: linear-gradient(rgb(88, 128, 219), rgb(57, 85, 151))

 

그라데이션 효과를 주었으면 처음 rgb는 상단 시작색상, 두번째 rgb는 하단 끝나는 색상으로 그라데이션 효과를 표현합니다.