Новые социальные иконки

Новые социальные иконки

02012-10-243208Денис Абдуллин

Новые социальные иконки. Иконки по умолчанию в серых оттенках, а при наведение (hover) они становиться цветными. Такие иконки можно установить в нижнюю часть сайта или в верхнюю.

Устанавливаем стили для социальных иконок:

Code
.twitter {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') no-repeat;}  
.facebook {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -41px 0 no-repeat;}  
.google {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -82px 0 no-repeat;}  
.dribbble {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -123px 0 no-repeat;}  
.flickr {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -164px 0 no-repeat;}  
.twitter:hover {background-position:0 -41px;}  
.facebook:hover {background-position:-41px -41px;}  
.google:hover {background-position:-82px -41px;}  
.dribbble:hover {background-position:-123px -41px;}  
.flickr:hover {background-position:-164px -41px;}

Это ставим там где хотите их видеть:

Code
<a href="#" class="twitter"></a>  
<a href="#" class="facebook"></a>  
<a href="#" class="google"></a>  
<a href="#" class="dribbble"></a>  
<a href="#" class="flickr"></a>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.