6.10.14, 22:47
0 комментарий
  Уроки

CSS3-библиотека с более чем 40 эффектами при наведении

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

Hover.css – это бесплатная CSS-библиотека, которая позволяет без труда применять анимацию при помощи эффекта при наведении. Вы можете использовать hover-эффект на CTA-элементах, кнопках, логотипах, изображениях и многом другом. Эта библиотека включает в себя более 40 эффектов, отсортированных по категориям: 2D-трансформации, изменение границ, переходы в тенях и свечении и многим другим.

Приступаем к работе

Для начала, вам нужно скачать Hover, и затем поместить файл hover.css в папку проекта. Либо, если вы захотите, то можно использовать hover-min.css, - более компактную версию, которая гораздо быстрее грузится. Наконец, свяжите файл с вашей веб-страницей следующим образом:

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


Добавляем Hover к элементу

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

Предположим, что мы имеем следующую разметку:

<a href="#" class="btn">SUBMIT</a>


Если правильно подойти к стилизации, то ссылка получится такой:

CSS3-библиотека с более чем 40 эффектами при наведении


Ссылка стала выглядеть как кнопка. Однако когда мы наводим на нее курсор, ничего не происходит. С помощью Hover-эффекта Hover Shadow мы можем сделать так, чтобы она вела себя следующим образом:

<a href="#" class="btn hover-shadow">SUBMIT</a>


Теперь кнопка показывает замечательный эффект с тенью.

CSS3-библиотека с более чем 40 эффектами при наведении


Дополнения и настройка

Если вы откроете hover.css в редакторе, то обнаружите, что каждый эффект представлен с параметрами по умолчанию. Эти параметры задают элементу желаемый внешний вид и поведение. Вы можете самостоятельно изменять значения настроек:

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

В завершение

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

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204