Гостевой вход

Вы не залогинились
00:00

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

Категория: Прочее

Метки: hover-эффекты, оформление кнопок, анимация
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>


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

Демо

Смысл стал понятен? Отлично!

Просмотров: 282 | Скачиваний: 21 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

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

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

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

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

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

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

    12 вариантов стильных всплывающих окон уведомлений

    Приготовил для вас сегодня очередную вкусняшку! Эта подборка рецептов всплывающих окошек может вам пригодиться, и не раз! Дайте только волю фантазии, ведь с их помощью можно реализовать столько полезного! Пока оформлял материал, на ум приходило и всплывающие контейнеры с ссылкой на скачивание, и окно онлайн-консультанта для продающего сайта, и окно о приходе нового сообщения и много,много,много еще чего!

    Набор эффектов на CSS для модальных окон - Часть 2

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

    Набор эффектов на CSS для модальных окон

    В этой подборке я хочу поделиться с вами различными вариантами переходов и анимаций для появляющихся модальных окон. Что есть, по-сути, модальное окно? Это - элемент графического пользовательского интерфейса, несущий в себе какую-либо информацию, и блокирующий своим появлением основной функционал сайта, покуда пользователь не закроет его. Чтобы это окно не было сухим и скучным, сделаем его появление красивым и интересным!

    Красивая форма авторизации с анимацией иконок

    Симпатичная форма авторизации, отличное сочетание цветов, главной изюминкой формы являются выезжающие слева от полей ввода иконки, визуально дублирующие назначение данного поля. Например, для поля username выводится иконка человечка, для поля password иконка замка.

    Прогресс-бар с плавной загрузкой на CSS

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

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: