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

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


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

вопрос
Как сделать соц закладки, что бы они были черно белые а при наведении мыши становились синими - простым языком при наведении мышки картинка менялась и при этом при клике в определённую область картинки например на кружок твиттер ссулка ввела в твиттер, если на кружочек контакта то в контакт! вот сама картинка Самодельные кнопки соц сетей как это всё реализовать в 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
63 | 23

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
10

494 | 164

Gopr - 22 июня 2013 23:23 - Юзер

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

Gopr
10

494 | 164

Gopr - 22 июня 2013 23:27 - Юзер

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

ПафНутиЙ
1065

3395 | 2433

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

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

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

Gopr
10

494 | 164

Gopr - 23 июня 2013 01:20 - Юзер

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

dj-avtosh
39

1479 | 390

dj-avtosh - 23 июня 2013 00:38 - шашлычник

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

skype: elhan.isaev

dj-avtosh
39

1479 | 390

dj-avtosh - 23 июня 2013 13:40 - шашлычник

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

skype: elhan.isaev

ПафНутиЙ
1065

3395 | 2433

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

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

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

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

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