Активные иконки соц. сетей

Приветствую всех читателей блога. В сегодняшней статье поделюсь с вами интересной штукой связанной с социальными кнопками на ваших сайтах. C помощью простого css при наведении курсора мыши cделаем соц. кнопки более оживленными.


На самом деле делается все это очень просто :)

Шаг № 1. Качаем архив иконок. В архиве 5 папок с иконками разных размеров (16 X 16, 24 X 24, 30 X 30, 48 X 48, 60 X 60). Выбираем подходящий размер иконок для своего сайта. Для примера я буду использовать иконки русских и забугорных соц. сетей таких как в контакте, мой мир, одноклассники и фэйсбук. Размер иконок пусть будет 60 на 60пх.

1

Шаг № 2. Открываем все эти иконки в обычном фотошопе и начинаем с ними работать. Начнем пожалуй с первой иконки, в контакте. Мы знаем, что иконка имеет форму квадрата 60 на 60 пикселей.

Наша задача удвоить ширину холста иконки и сделать копию самой иконки. Для этого выбираем панель инструментов Изображение -» Размер холста…

2

В открывшемся окне выставляем следующие параметры (обратите внимание на расположение).

3

Подтверждаем изменения нажатием на кнопку “Да”
Должно получиться так

4

Ок. Пол дела сделали :an2: . Теперь нам нужно сделать копию иконки. Для этого отправляемся в правую нижнюю часть фотошопа, туда где всякие слои.

Удерживая слой левой кнопкой мыши, перетаскиваем на значок нового слоя

5

Получаем копию слоя, то бишь копию иконки “в контакте”

6

Теперь у нас есть два абсолютно одинаковых слоя с иконкой. Наша задача сдвинуть один слой влево и сделать его на 50% прозрачным. Выбираем инструмент перемещение и перетаскиваем слой

8

Добавляем прозрачность

9

Сохраняем для Web и устройств

10

11

14

С остальными тремя иконками (мой мир, одноклассники и фэйсбук) проделываем все тоже самое. В итоге у вас должно получиться 4 иконки

16

Шаг № 3. Ну что ж, осталось заставить все это дело работать как на примере.

Пишем HTML

Добавляем CSS

На выходе получаем активные иконки соц. сетей, простыми словами вот такую штуку

18

P.S. Не забываем жмякать кнопки соц. сетей и подписываться на актуальные статьи блога. С вами был снова я Игорь Дулин. Всего хорошего ;-)

С уважением, Игорь Дулин


Cервис моментального приема платежей и партнерских программ Glopart.ru



Понравился пост? Поделись с друзьями!

Метки записи

Комментариев: 1

  1. Спасибо! Очень пригодилось :)

Оставить комментарий


;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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