«

»

Сен 17 2012

Распечатать Запись

Добавляем эффект при наведении на социальные иконки в теме Graphene

В теме Graphene в верхней части экрана могут размещаться иконки социальных сетей, RSS и другие способы подписки на ваш блог.  По умолчанию эти иконки выглядят как обычные картинки, но к ним легко добавить эффект подсветки при наведении курсора. Вот как иконки при этом будут выглядеть в обычном состоянии:

Социальные иконки в теме Graphene в их обычном состоянии.

А так будет выглядеть иконка твиттера при наведении на неё курсора:

Иконка твиттера с эффектом посветки при наведении.

В живую можно посмотреть у меня в блоге – наведите курсор на любую иконку в верху сайта. Для того, чтобы у себя реализовать такую же красоту вам необходимо добавить стили CSS. Если вы используете дочернюю тему Graphene, то ниже написанные стили надо добавить в ваш файл со стилями. Если вы используете непосредственно саму тему Graphene, то это код можно добавить в Внешний вид — Параметры Graphene — Параметры отображения — Специальны CSS (опечатка не у меня, а в текущей локализации Graphene). В других темах читайте в руководствах куда добавлять стили CSS. А вот и тот самый обещанный код:

 Как видите, он достаточно простой. В нормальном состоянии иконки полупрозрачные, а при наведении прозрачность убирается. Числа подкорректируйте под свои личные дизайнерские предпочтения.

З.Ы. Изначальный источник материала: http://www.prasannasp.net/adding-hover-effect-for-graphene-social-media-icons/.

Добавить комментарий

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