Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Hover.css – CSS3 библиотека, насчитывающая более 40 эффектов.

Дата добавления: 13.09.2014 - 12:35
Добавил: Buger
Количество просмотров: 841
Количество комментариев: 0
Размер файла: 47.8Kb
Рейтинг материала: 3.0 / 2
Hover.css – CSS3 библиотека, насчитывающая более 40 эффектов.
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 3.0
/
голосов 2
Когда мы имеем дело с проблемой, пытаясь получить внимание пользователей от различных эффектов, есть много способов для Вас, чтобы добиться этого результата. В особых случаях отличным способом привлечь внимание к ссылке или кнопке, это эффект при наведении. Обычно, при наведении когда пользователи перемещают свои курсоры над кнопкой, происходит изменение цвета элемента или состояние градиента. И теперь с большим количеством функций в CSS3, много вещей можно также настроить эффект наведения. Один из них является применение анимации. И Hover.css – CSS3 библиотека, может сделать это с легкостью.

Начало работы с Hover
Для начала работы, вам необходимо скачать Hover библиотеку затем положить файл hover.css в папку вашего проекта. Или, если вы предпочитаете более компактную версию, то вы можете использовать hover-min.css, которая меньше весит и быстрее загружается. Подключаем файл в веб-страницу таким образом:
Код
<head>  
  ..  
  <link href="css/hover.css" rel="stylesheet">  
  ..  
  </head>


Добавление Hover в элемент
Чтобы добавить классный эффект парения, просто укажите название эффекта в класс элемента. Вы можете увидеть интерактивную демонстрацию всех доступных эффектов на отдельной странице Hover. Обязательно используйте только строчные буквы, и если у него есть пробел между ними, просто замените его на тире.

Скажем к примеру, у меня есть разметка ссылки такого вида:
Код
<a href="#" class="btn">SUBMIT</a>


Если стиль задан должным образом, то ссылка будет выглядеть так:


Ссылка изменилась и стала выглядеть в виде кнопки согласно указанного в ней класса "btn" (class="btn"). Но когда я попробую навести курсор на кнопку, кнопка не изменится и останется статичной. Затем одним из эффекта Hover, Hover Shadow, я редактировал разметку и добавил для нее соответствующий класс следующим образом:
Код
<a href="#" class="btn hover-shadow">SUBMIT</a>


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


Некоторые хаки и кастомизации
Если вы откроете hover.css при помощи редактора ( например: Brackets ), вы обнаружите, что каждый эффект идет с некоторыми свойствами по умолчанию. Скачать последнюю версию редактора Brackets можно на сайте http://gidbrackets.ru . Эти свойства дают элементам наиболее желаемый результат как для отображения, так и для внешнего вида.
Ниже приведены свойства по умолчанию, и настроить их вы сможете для удовлетворения ваших потребностей по желанию:

display: требуются для работы эффектов.
transform: используется CSS3 для повышения производительности на мобильных и планшетных устройствах
box-shadow: задает прозрачную тень и вызывает края CSS3 трансформированных элементов, для того чтобы выглядеть более гладкими на мобильных / планшетных устройствах

Источник: http://art-ucoz.ru
Добавлять комментарии могут только зарегистрированные пользователи.