CSS 소셜 아이콘 만들기 > CSS

본문 바로가기
사이트 내 전체검색

CSS

CSS 소셜 아이콘 만들기

페이지 정보

작성자 no_profile eyoom 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 6,265회 작성일 17-04-23 15:52

본문

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는 하단 끝나는 색상으로 그라데이션 효과를 표현합니다.

첨부파일

댓글목록

등록된 댓글이 없습니다.

Total 1건 1 페이지
게시물 검색

회원로그인

접속자집계

오늘
769
어제
806
최대
1,148
전체
309,024

그누보드5
Copyright © 소유하신 도메인. All rights reserved.