Что бы увидеть email и телефон, включите JavaScript.

Иконки для социальных сетей от сервиса Яндекса "Поделиться"


Если Вы в своих разработках, используете сервис "Поделиться" от Яндекса, то рано или поздно у Вас возникает необходимость сделать, так сказать, лучше, чем стандартные. То есть не только поменять вид, но и сделать, чтобы они становились цветными только при наведении на определенную кнопку курсора.

Вот сделал себе несколько CSS спрайтов с разными размерами иконок социальных сетей, специально для сервиса "Поделиться" от Яндекса и к ним файлы стилей. Выкладываю этот архив, если кому пригодится, буду рад.

В CSS спрайтах есть иконки для:

  • Вконтакте;
  • Facebook;
  • Twitter;
  • Одноклассники;
  • МойМир;
  • Livejpurnal;
  • Google+;
  • Surfingbird.

Соответственно для каждой из них прописаны свои стили. Размеры иконок: 30х30, 40х40, 50х50. По размеру иконок называются и файлы стилей: social30x30.css, social40x40.css, social50x50.css.

Стили прописаны, для неактивной кнопки, серое изображение и для активной кнопки, то есть при наведении курсора она становится цветной.

В архиве две папки, это CSS с файлами и Images со спрайтами. Чтобы применить данные иконки социальных сетей, достаточно подключить файл стилей, необходимого размера.

Подключать Вы можете простым копипастом, или с помощью строки:

в блоке head, или же вставить строку:

@import "social30x30.css";

в файл основных стилей, или любой файл стилей подключенный в head блоке.

Собственно, всё пользуйтесь, вот ссылка, чтобы скачать архив. Да не забудьте в сервисе "Поделиться", выбрать внешний вид "только иконки". Добра Вам!

Теги материала: CSS
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *