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


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

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

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

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

HTML

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

 

CSS

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

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

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

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

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

 

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

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

Suggested Posts

Крутые исходники PSD

Адаптивные и бесплатные шаблоны в HTML и в Flat стиле

Возврат к основам или как создать HTML5 шаблон?!

MooBoo — шаблон интернет-магазина моды OpenCart

Создаем слайдер для сайта с эффектом 3D

Используем карты Google для увеличения посещаемости