Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Простой способ сверстать соц. иконки с анимацией
Простой способ сверстать соц. иконки с анимацией
Webmaster32
Дата: Среда, 19.10.2016, 22:07 | Сообщение # 1
Модераторы
Сообщений:185
Награды: 3


Содержимое архива загрузить в корневую папку сайта.
Вместо ваш_сайт.ру подставить адрес вашего сайта.
В архиве имеется демо скрипта.

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://ваш_сайт.ру/sprite/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;}
Прикрепления: 1371892084_icon.zip(7Kb)


Когда уходят герои, на их места приходят клоуны!..



Сообщение отредактировал Webmaster32 - Среда, 19.10.2016, 22:08
Kosten
Дата: Среда, 19.10.2016, 22:28 | Сообщение # 2
Администраторы
Сообщений:13015
Награды: 43


Webmaster32, а так не чего, под светло темный дизайн подойдут, и эффект есть.

Прикрепления: 5190290.png(3Kb)
Kosten
Дата: Среда, 19.10.2016, 22:30 | Сообщение # 3
Администраторы
Сообщений:13015
Награды: 43


Вот думаю, здесь же можно просто с кода убрать, просто на вид материала и комментарий к нему поставить, так как там от сервис Яндекс, а здесь они автономные будут, но тестовом нужно посмотреть.
Kosten
Дата: Среда, 19.10.2016, 22:43 | Сообщение # 4
Администраторы
Сообщений:13015
Награды: 43


Хотя можно под название сделать или убрать их и поставить свои кнопки.

Код
<a href="http://vkontakte.ru/share.php?url=ссылка вашего сайта“ rel="nofollow" target="_blank">Вконтакте</a>
<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ссылка вашего сайта" rel="nofollow" target="_blank">Одноклассники</a>
<a href=http://connect.mail.ru/share?share_url=ссылка вашего сайта“ rel="nofollow" target="_blank">Mail.ru</a>
<a href="http://www.facebook.com/sharer.php?u=ссылка вашего сайта" rel="nofollow" target="_blank">Facebook</a>
<a href="https://plusone.google.com/_/+1/confirm?hl=ru&url=ссылка вашего сайта">Google +</a>
<a href="https://twitter.com/intent/tweet?text=ссылка вашего сайта" rel="nofollow" target="_blank">Twitter</a>


Получиться так:

Kosten
Дата: Среда, 19.10.2016, 22:52 | Сообщение # 5
Администраторы
Сообщений:13015
Награды: 43


Может кому кнопки в таком дизайн пригодятся, так можете скачать.

Прикрепления: 6368842.jpg(21Kb) · soc.knopki.rar(22Kb)
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Простой способ сверстать соц. иконки с анимацией
Страница 1 из 11
Поиск: