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


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

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

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

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

HTML

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

 

CSS

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

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

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

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

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

 

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

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

Suggested Posts

Модуль CSV Price Pro import/export 4.1.11-3.3.6

Стилизация выпадающего списка для сайта

Пак необходимых плагинов – WordPress Plugins Pack

Модуль OpenCart Easyphoto — мультизагрузка фото

Как установить тему на блог WordPress

Как сверстать шаблона сайта из PSD в HTML и CSS