Главная » Каталог » Прочее » Hover.css - набор CSS3 эффектов для элементов страницы сайта

Прочее

Hover.css - набор CSS3 эффектов для элементов страницы сайта



Hover.css представляет собой таблицу CSS-стилей, применимых к различным элементам на странице сайта (ссылкам, кнопкам, логотипам, SVG и просто изображениям), дающих в итоге различные визуальные эффекты, как то: трансформация, фоновые и граничные переходы, тени и свечение, пузыри и загнутые уголки и прочее.
Вся прелесть в том, что вам достаточно подключить файл стилей hover.css на страницах своего сайта и прописать для нужных элементов страниц соответствующие эффектам классы и всё, можете любоваться!

Как пользоваться?

Для начала, скачайте прикреплённый архив, в котором вы найдёте в папке css нужный нам файл, hover.css. Его необходимо сразу подключить в шапку нужных вам страниц сайта.

Код

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


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

Код

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">


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

Код

<a href="#" class="button">Кнопка</a>


Код

.button {
  display: inline-block;
  padding: 1em;
  background-color: #79BD9A;
  text-decoration: none;
  color: white;
}


Демо

У нас получилась симпатичная кнопка, с довольно приятным цветом, но это не наша конечная цель! Мы сделаем её более привлекательной с помощью эффектов из hover.css!

Теперь, когда у нас есть кнопка, с её базовым оформлением, и классом button, нам остаётся лишь добавлять класс, отвечающий за конкретный эффект для этой кнопки. Всё просто. Все доступные эффекты вы можете прямо сейчас посмотреть на демо-странице по ссылке ниже.

Демо

Если вам понравился какой-то эффект, как узнать, какой класс в файле стилей hover.css отвечает за него? Очень просто, на демо-странице для каждого эффекта написано название. Например: "Pulse Grow", "Push", "Pop" итд.
Так вот, название классов будут одноимёнными, но прописанными строчными буквами:

Код

.hvr-pulse-grow
.hvr-push
.hvr-pop


и т.д.

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

Код

<a href="#" class="button hvr-pulse-grow">Кнопка</a>


смотрим что получилось:

Демо

Смысл стал понятен? Отлично!
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

    5 вариантов CSS3 HOVER-эффектов для изображений

    18.01.2017

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

    Комментарии: 0   Просмотры: 216

    3 варианта CSS3 HOVER-эффекта для изображений с подписями

    18.01.2017

    В современном интернет-сообществе существует множество методов, используемых для создания интерактивности на сайте, но, пожалуй, наиболее элегантным остаётся CSS, и, в частности, возможности, пришедшие к нам с появлением CSS3. Раньше, для создания каких-то эффектов, мы прибегали к помощи JavaScript технологий, но теперь, благодаря всё более растущей поддержке многими современными браузерами технологий CSS3, реализовать эффекты сейчас можно без каких-либо скриптов. Здесь мы рассмотрим три варианта различных эффектов для изображений, суть которых: появляющаяся подпись к изображению, сопровождается каким-то эффектом.

    Комментарии: 0   Просмотры: 247

    15 HOVER-эффектов для изображений с помощью CSS

    18.01.2017

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

    Комментарии: 0   Просмотры: 236

Хостинг от uCoz