Hover.css – CSS3 библиотека, насчитывающая более 40 эффектов.

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

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


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

Скажем к примеру, у меня есть разметка ссылки такого вида:


Если стиль задан должным образом, то ссылка будет выглядеть так:


Ссылка изменилась и стала выглядеть в виде кнопки согласно указанного в ней класса "btn" (class="btn"). Но когда я попробую навести курсор на кнопку, кнопка не изменится и останется статичной. Затем одним из эффекта Hover, Hover Shadow, я редактировал разметку и добавил для нее соответствующий класс следующим образом:


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


Некоторые хаки и кастомизации
Если вы откроете hover.css при помощи редактора ( например: Brackets ), вы обнаружите, что каждый эффект идет с некоторыми свойствами по умолчанию. Скачать последнюю версию редактора Brackets можно на сайте http://gidbrackets.ru . Эти свойства дают элементам наиболее желаемый результат как для отображения, так и для внешнего вида.
Ниже приведены свойства по умолчанию, и настроить их вы сможете для удовлетворения ваших потребностей по желанию:

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

Источник: http://art-ucoz.ru