Главная > CSS/Style Sheets > Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении

Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении


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

Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении

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

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

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

<head>
..
<link href="css/hover.css" rel="stylesheet">
..
</head>

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

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

Предположим, что мы имеем следующую разметку:

<a href="#" class="btn">SUBMIT</a>

Если правильно подойти к стилизации, то ссылка получится такой:

Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении

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

<a href="#" class="btn hover-shadow">SUBMIT</a>

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

Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении

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

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

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

В завершение

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