6.10.14, 22:47
0 комментарий
  Уроки

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

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

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>


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

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


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

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


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

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


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

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

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

В завершение

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

Напишите своё мнение