Техно-мир

Для привлечения внимания посетителей существует множество трюков. В особых случаях, некоторые разработчики используют эффект при наведении. Он отлично привлекает внимание к ссылке или кнопке. Зачастую, этот эффект заключается в изменении цвета элемента или появления подчеркивания. Однако при помощи современных свойств CSS3 можно делать и множество других эффектов. Один из них – это возможность применять анимацию. Hover.css позволяет нам без труда реализовать такую задумку.

Hover.css – это бесплатная CSS-библиотека, которая позволяет без труда применять анимацию при помощи эффекта при наведении. Вы можете использовать hover-эффект на CTA-элементах, кнопках, логотипах, изображениях и многом другом. Эта библиотека включает в себя более 40 эффектов, отсортированных по категориям: 2D-трансформации, изменение границ, переходы в тенях и свечении и многим другим.

Приступаем к работе

Для начала, вам нужно скачать Hover, и затем поместить файл hover.css в папку проекта. Либо, если вы захотите, то можно использовать hover-min.css, — более компактную версию, которая гораздо быстрее грузится. Наконец, свяжите файл с вашей веб-страницей следующим образом:

..

..

Добавляем Hover к элементу

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

SUBMIT

Если правильно подойти к стилизации, то ссылка получится такой: Ссылка стала выглядеть как кнопка. Однако когда мы наводим на нее курсор, ничего не происходит. С помощью Hover-эффекта Hover Shadow мы можем сделать так, чтобы она вела себя следующим образом:

SUBMIT

Теперь кнопка показывает замечательный эффект с тенью.

Дополнения и настройка

Если вы откроете hover.css в редакторе, то обнаружите, что каждый эффект представлен с параметрами по умолчанию. Эти параметры задают элементу желаемый внешний вид и поведение. Вы можете самостоятельно изменять значения настроек:

display — необходим для работы эффекта.

transform — используется с CSS3 transforms для повышения производительности при просмотре с планшета или мобильного устройства.
box-shadow — придает теням сглаженный эффект.

В завершение

Hover представляет собой великолепный пример применения CSS3. Однако, так как большинство современных эффектов, включая анимацию, переходы и трансформации, используют CSS3-свойства, некоторые браузеры просто-напросто не сможет правильно отображать эти эффекты, поэтому вам придется позаботиться о запасном варианте отображения. Вернуться назад