Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » CSS Сниппеты » Простой способ сверстать соц. иконки с анимацией

Простой способ сверстать соц. иконки с анимацией


     23.06.2013    сниппет, css3, transition    CSS Сниппеты    8103

По мотивам неправильного ответа
HTML:
<div class="soc-cod">
    <a href="#" class="fa">Facebook</a>
    <a href="#" class="vk">В контакте</a>
    <a href="#" class="tv">Twitter</a>
    <a href="#" class="lv">Live Journal</a>
    <a href="#" class="od">Одноклассники</a>
    <a href="#" class="ma">Mail.ru</a>
    <a href="#" class="go">Google</a>
    <a href="#" class="ya">Яндекс</a>
</div>


CSS:
.soc-cod a {
    width: 25px;
    height: 25px;
    margin: 0 3px;
    float: left;
    display: block;
    overflow: hidden;
    background: url(http://dle-faq.ru/uploads/posts/2013-06/1371892084_icon_sprite_1.png) no-repeat 0 0;
    text-indent: -9999px;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.soc-cod .fa        {background-position: 0 0;}
.soc-cod .fa:hover    {background-position: 0 -27px;}
.soc-cod .vk        {background-position: -28px 0;}
.soc-cod .vk:hover    {background-position: -28px -27px;}
.soc-cod .tv        {background-position: -57px 0;}
.soc-cod .tv:hover    {background-position: -57px -27px;}
.soc-cod .lv        {background-position: -85px 0;}
.soc-cod .lv:hover    {background-position: -85px -27px;}
.soc-cod .od        {background-position: -113px 0;}
.soc-cod .od:hover    {background-position: -113px -27px;}
.soc-cod .ma        {background-position: -141px 0;}
.soc-cod .ma:hover    {background-position: -141px -27px;}
.soc-cod .go        {background-position: -168px 0;}
.soc-cod .go:hover    {background-position: -168px -27px;}
.soc-cod .ya        {background-position: -196px 0;}
.soc-cod .ya:hover    {background-position: -196px -27px;}
Демо

6 комментариев

Axel
Юзер

Axel - 5 августа 2013 14:38 -

А возможно ли сделать соц. кнопки с счетчиками? На просторах интеренат не могу найти ни одного достойного набора кнопок с счетчиками лайков. Хотелось бы что-то свое =)

ПафНутиЙ
Админ

ПафНутиЙ - 5 августа 2013 19:04 -


Каков вопрос - таков и ответ. Просто помните об этом.

multoff_net
Юзер

multoff_net - 4 октября 2013 21:18 -

как бы к этим картинкам прикрутить ссылки соц сетей. пытался что - то сделать изэтой инстукции : http://pafnuty.name/statyi/jquery/119-podklyuchaem-socialnye-zakladki-ot-share42com-v-shortstorytpl-dle.html - но ничего не получилось. может кто подскажет как быть?

multoff_net
Юзер

multoff_net - 5 октября 2013 21:37 -

или хотябы напишите ссылки к каждой кнопке....

multoff_net
Юзер

multoff_net - 7 октября 2013 16:07 -

вобщем сделал все сам... спасибо за отсутствие помощи и стимулирование мозговой деятельности!

Gopr
Юзер

Gopr - 23 января 2014 20:19 -

Вот еще + демо

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх