Эффект при наведении на заголовок


ЭФФЕКТЫ ПРИ НАВЕДЕНИИ ДЛЯ БЛОКОВ С ЗАГОЛОВКАМИ

Немножко свежих идей для красивого оформления блоков с заголовками при наведении на них курсора. Тонкие линии, белый цвет — ничего лишнего,.
Будем использовать 3D transform и transition для псевдо-элементов — работать данные эффекты будут только в современных браузерах.
К сожалению, не все эффекты с текстом в Firefox происходят плавно, может в следующих версиях ситуация улучшится.

ЭФФЕКТЫ ПРИ НАВЕДЕНИИ ДЛЯ БЛОКОВ С ЗАГОЛОВКАМИ

Иконки используемые в демке Feather icon set от Cole Bemis.

HTML

Для разметки используем сетку с figure:

 

CSS

Пример стилей для одного из блоков.

Данный эффект назвали «Sadie«.

У нас тут есть псевдо-элемент с линейным градиентом снизу, и дополнительным появляющимся текстом. Также заголовок будет изменять цвет:

Остальные общие стили для сетки и индивидуальные стили для каждого блока с эффектами ищите в content.css.

ДЕМО    /   Скачать

 

Источник: pcvector.net

Previous Правильное использование большой и выразительной типографики в веб дизайне
Next Отправка почты в PHP с вложениями

Suggested Posts

Модуль авторизации через социальные сети

OpenCart 2.2 — пять свежих адаптивных шаблонов от pavothemes

Самые распространенные СЕО ошибки

Категория аккордеон на Opencart 2.x без модуля

10 бесплатных шрифтов с поддержкой кириллицы

Кнопка для сайта с дополнительной информацией