logo

Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Прописываем реальный путь к файлу


    <link rel="stylesheet" href="../hover-min.css">

Теперь достаточно необходимому тегу прописать выбранный класс.


<a href="#" class="button hvr-grow">grow</a>
<a href="#" class="button hvr-shrink">shrink</a>
<a href="#" class="button hvr-pulse">pulse</a>
<a href="#" class="button hvr-pulse-grow">pulse-grow</a>
........

Для того, чтобы названия классов не совпали с уже возможно примененными на сайте, к ним добавлен префикс hvr-…. Конечно, если вам необходимы всего несколько эффектов, всю библиотеку использовать не стоит. Достаточно воспользоваться стилями для выбранного класса.


 /*  Внешний вид кнопки  */
.button {
   display: inline-block;
   margin: 1.25em;
   padding: 1em;
   width: 25%;
   background: #f4db90;
   background: linear-gradient(135deg,  #f4db90 0%,#ea8407 95%);
   font-weight: 700;
   text-align: center;
}
/*  Для примера стили одного из классов библиотеки hover.css  */
.hvr-grow {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
   -webkit-transition-property: -webkit-transform;
   transition-property: transform
}
.hvr-grow:active,
.hvr-grow:focus,
.hvr-grow:hover {
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1)
}

При необходимости, изменяя тот или другой параметр, «подгоняем» стили по себя.

Эффекты для некоторых классов приведены ниже.

2D-Трансформация

Тени

Трансформация границ

Загибаем углы

Иконки

Небольшое дополнение. Познакомимся с библиотекой иконок. Скачивать ничего не будем, просто подключим библиотеку.


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

И как и выше, просто прописываем тегу новый класс.


<a href="#" class="button hvr-icon-pulse-shrink">icon-pulse-shrink</a>
<a href="#" class="button hvr-icon-bounce">icon-bounce</a>
<a href="#" class="button hvr-icon-hang ">icon-hang</a>

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


.hvr-icon-buzz:before {
   content: "\f017";   /* Код иконки */
   position: absolute;
   right: 1em;          /* положение иконки */
   padding: 0 1px;
   font-family: FontAwesome;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
}
.hvr-icon-buzz:active:before,
.hvr-icon-buzz:focus:before,
.hvr-icon-buzz:hover:before {
   -webkit-animation-name: hvr-icon-buzz;
   animation-name: hvr-icon-buzz;
   -webkit-animation-duration: .15s;
   animation-duration: .15s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
    /* Анимация */
}@-webkit-keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
@keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
.hvr-icon-buzz {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   padding-right: 2.2em;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}

А вот так это выглядит:


Практические примеры 0

Рекомендую прочитать...

Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Трансформация «Дверной глазок»
трансформация Дверной глазок

Приподнимаем заслонку дверного глазка наводя курсор, а под ней находится ссылка на скачивание. Код каждого из представленных ниже глазков одинаков. Разница состоит в том, что для каждого из вариантов используются различные фоновые изображения и значения некоторых свойств. Различия выделены соответственно разными цветами.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.