14 окт 2014
Hover.css
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Hover.css .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
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;
}


Кнопка имеет изумрудный цвет, но ничего особенного в ней нет.
Добавим, для примера, эффект 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);
}



Применим его к кнопке, просто добавим класс:

<a href="#" class="button grow-rotate">Подробнее</a>


Следует обратить внимание, что не все эффекты будут доступны в старых версиях браузеров.

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.