—»     —»   Hover.css: CSS3-библиотека с более чем 40 эффектами при наведении
  Раздел: CSS/Style Sheets   Нет комментариев  

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



Для привлечения внимания посетителей существует множество трюков. В особых случаях, некоторые разработчики используют эффект при наведении. Он отлично привлекает внимание к ссылке или кнопке. Зачастую, этот эффект заключается в изменении цвета элемента или появления подчеркивания. Однако при помощи современных свойств 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-свойства, некоторые браузеры просто-напросто не сможет правильно отображать эти эффекты, поэтому вам придется позаботиться о запасном варианте отображения.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8459   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930