Простые иконки с эффектом при наведении + 17 вариантов | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSПростые иконки с эффектом при наведении + 17 вариантов
Дата: 04.06.2013 в 23:57 | Просмотров: 13436

Простые иконки с эффектом при наведении + 17 вариантов

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

Сегодня мы будем создавать простые иконки с эффектами при наведении. Идея состоит в том, чтобы создать простые, но стильные эффекты, используя CSS3 transitions анимации и псевдо-элементы. Также советую посмотреть пример современных 3D кнопок на CSS3.

Для иконок мы используем шрифт значков (Eco Ico by Matthew Skiles, созданный с помощью приложения IcoMoon), который мы добавляем используя псевдо-класс :before. Скачать иконки css Вы можете по ссылке выше.

Пожалуйста, обратите внимание: этот эффект работает только в тех браузерах, которые поддерживают соответствующие свойства CSS.

HTML структура и CSS прелести

Для каждой иконки прописан соответствующий класс для вывода значка, и добавим дополнительный класс hi-icon, который пригодится нам далее:

Для использования шрифта иконок, необходимо подключить соответствующий шрифт (к исходникам прилагается) с помощью @font-face, и делается это примерно так:

Только не забудьте прописать свои, правильные пути к файлам шрифта.

В исходниках Вы найдете 17 примеров или вариантов эффектов, которые Вы можете использовать. Для примера, возьмем эффект при наведении – простое вращение значка:

Это только пример того, что можно сделать на CSS3, и это не предел – все зависит от Вашей фантазии. Надеюсь то, что Вы нашли в скачанном исходнике, Вам понравилось! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


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