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

Самодельные кнопки соц сетей


     22.06.2013    Шаблоны (TPL), Стили (CSS), Хаки    5590

вопрос
Как сделать соц закладки, что бы они были черно белые а при наведении мыши становились синими - простым языком при наведении мышки картинка менялась и при этом при клике в определённую область картинки например на кружок твиттер ссулка ввела в твиттер, если на кружочек контакта то в контакт! вот сама картинка Самодельные кнопки соц сетей как это всё реализовать в css и вывести в шаблоне dle.
Изняснился как мог, думаю кто в этом разбирается меня понял!

Ответил: Gopr


В css вставляем
.soc-cod .soc {width:25px;height:25px;margin:0 3px;float:left;background:url(http://dle-faq.ru/uploads/posts/2013-06/1371892084_icon_sprite_1.png) no-repeat 0 0;text-indent:-9999px}
.soc-cod .soc.fa {background-position:0 0}
.soc-cod .soc.fa:hover {background-position:0 -27px}
.soc-cod .soc.vk {background-position:-28px 0}
.soc-cod .soc.vk:hover {background-position:-28px -27px}
.soc-cod .soc.tv {background-position:-57px 0}
.soc-cod .soc.tv:hover {background-position:-57px -27px}
.soc-cod .soc.lv {background-position:-85px 0}
.soc-cod .soc.lv:hover {background-position:-85px -27px}
.soc-cod .soc.od {background-position:-113px 0}
.soc-cod .soc.od:hover {background-position:-113px -27px}
.soc-cod .soc.ma {background-position:-141px 0}
.soc-cod .soc.ma:hover {background-position:-141px -27px}
.soc-cod .soc.go {background-position:-168px 0}
.soc-cod .soc.go:hover {background-position:-168px -27px}
.soc-cod .soc.ya {background-position:-196px 0}
.soc-cod .soc.ya:hover {background-position:-196px -27px}

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


UPD:
Вот правильный ответ
Отредактировал 23-06-2013, 00:49 - ПафНутиЙ
Причина: Добавил правильный ответ

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

jarrro
Юзер

jarrro - 22 июня 2013 20:16 -

Я бы сделал так: Разрезал, для начала, попарно facebook (синий и серый), контакт (синий и серый) и тд.. Вывод css очень прост, для начала:
<img src="spacer.gif" class="facebook">

spacer.gif - это пустая картинка 1x1px. В классе facebook:
.facebook { 
background:url(../facebook.png) top left;
cursor:pointer;
width:50px;
height:50px;
}
.facebook:hover {
background-position: 100% -50px;
}

Ну, а для того, чтобы работали сами кнопки нужно зайти в каждый сервис и посмотреть их код, далее прикрутить их к каждой кнопке. В интернете много способов как это сделать.

Gopr
Юзер

Gopr - 22 июня 2013 23:23 -

***Комментарий удален***

Gopr
Юзер

Gopr - 22 июня 2013 23:27 -

Пример, на всякий.

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

ПафНутиЙ - 23 июня 2013 00:48 -

И где это учат интересно вкладывать блочные элементы внутрь строчных?
Вот правильный ответ

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

Gopr
Юзер

Gopr - 23 июня 2013 01:20 -

Наверное ни где не учат (Т_Т), но я где то научился (@_@). Это плохо?

dj-avtosh
шашлычник

dj-avtosh - 23 июня 2013 00:38 -

Последний пример спрайтами - отличный вариант ;)

skype: elhan.isaev

dj-avtosh
шашлычник

dj-avtosh - 23 июня 2013 13:40 -

Паф, в html 5 это премлимо, как ты помнишь.

skype: elhan.isaev

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

ПафНутиЙ - 23 июня 2013 13:48 -

К счастью я уже пару лет не делаю сайты НЕ на html5 smile

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

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

Похожие вопросы

наверх