14
окт
2014
Hover.css - коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.
Для использования на своем сайте, нужно скачать и подключить файл стилей:
Допустим мы хотим применить эффект к кнопке, которая задана следующим html:
Класс .button имеет следующие стили:
Кнопка имеет изумрудный цвет, но ничего особенного в ней нет.
Добавим, для примера, эффект grow-rotate - плавный поворот и увеличение при наведении.
Воспользовавшись поиском по файлу hover.css мы найдем стили этого эффекта:
Применим его к кнопке, просто добавим класс:
Следует обратить внимание, что не все эффекты будут доступны в старых версиях браузеров.
Hover.css
Hover.css - коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.
Для использования на своем сайте, нужно скачать и подключить файл стилей:
<link href="css/hover.css" rel="stylesheet" media="all">
Допустим мы хотим применить эффект к кнопке, которая задана следующим html:
<a href="#" class="button">Подробнее</a>
Класс .button имеет следующие стили:
.button {
background:#1abc9c;
color: #ffffff;
cursor: pointer;
margin: 0.4em;
padding: 1em;
text-decoration: none;
}
background:#1abc9c;
color: #ffffff;
cursor: pointer;
margin: 0.4em;
padding: 1em;
text-decoration: none;
}
Кнопка имеет изумрудный цвет, но ничего особенного в ней нет.
Добавим, для примера, эффект grow-rotate - плавный поворот и увеличение при наведении.
Воспользовавшись поиском по файлу hover.css мы найдем стили этого эффекта:
/* Grow Rotate */
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
Применим его к кнопке, просто добавим класс:
<a href="#" class="button grow-rotate">Подробнее</a>
Следует обратить внимание, что не все эффекты будут доступны в старых версиях браузеров.
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив.