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

Приведенные в данном материале эффекты работают в современных браузерах. Поддержка IE зависит от версии и перед применением в реальном проекте надо провести тщательное тестирование.

Подёргивание вверх

Данный эффект отлично работает, когда у вас есть несколько выравненных по горизонтали элементов. Проведение курсора мыши вдоль такой линейки порождает волну.

Его очень просто сделать. Для каждого элемента определяется поле и при наведении курсора мыши размер поля уменьшается. Начальное значение поля 15px, уменьшается оно до 2px, что заставляет изображение "подпрыгивать вверх". Данный эффект можно использовать и для текста в списке.

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

CSS

Ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; }

При наведении курсора мыши каждое изображение медленно увеличивается в размерах, а при потере фокуса - возвращается к своим оригинальным размерам.

Для данного эффекта используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля равное половине ширины.

CSS

#container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; }

Данный эффект очень напоминает использование JavaScript, когда при наведении курсора мыши на один объект проявляется другой. Для его получения изображение и текст помещаются в один контейнер div , а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента div . Таким образом текст помещается вверх элемента div и скрывается.

Для проявления текста при наведении курсора мыши, мы просто изменяем цвет и высоту строки. Так создается эффект масштабированного проявления текста.

CSS

#ex3 { width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex3:hover { line-height: 133px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }

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

Для данного эффекта используется много новых, специфичных для конкретного браузера свойств CSS, поэтому использование в старых браузерах не пройдет. Галерея использует тени, переходы и трансформации.

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

CSS

#ex4 { width: 800px; margin: 0 auto; } #ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Это замечательный и сложный эффект. Изначально изображения имеют небольшую прозрачность.Затем, когда на него наводится курсор мыши, прозрачность полностью убирается, появляется свечение вокруг и отражение (только для браузеров Webkit).

CSS

#ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Трансформацияя*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Отражение*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Отражение*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Свечение*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

Заключение

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

Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов :

2. Direction-aware Hover Effect

Этот невероятный CSS3-эффект поможет вам добиться уникального результата. При наведении курсора на элементы страницы эффект начинает следовать за указателем, создавая невероятный трехмерный эффект:

3. Wacom Hover Effect

Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:

4. CSS3 Hover Effects

Если вам нужны круговые эффекты на CSS3-коде , то вы попали в нужное место! Здесь их целых 12 штук!

5. Hover Animation from UNIQLO

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

6. Button Hover Effects

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

7. 10 Stunning Hover Effects

Еще один набор, состоящий из 10 различных CSS3-эффектов . Большинство из них очень впечатляющие:

8. CSS3 Hover Effects 2

Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS . Каждый эффект раскрывает заголовок и описание:

9. Bounce on Hover

Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:

10. 8-bit Hovers

Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!

11. Simple Title Hover Effect

Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:

12. Flip Down Effect

Еще один простой, но очень привлекательный CSS эффект . При наведении курсора мыши на изображение оно переворачивается, раскрывая пользователю заголовок и описание:

13. Curiosity Award

Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:

14. Image Hover Effect

Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!

15. Hover Animation

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

16. Hover Me Brother

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

17. Nautilus SCSS HAML Hover Effects

Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!

18. SVG Border Hover Effect 1

Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:

19. Hover Search Map Icon

Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:

20. Social Icon Pane

Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:

21. Product Item Additions Info

Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:

22. Animated Envelope

Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:

23. Back to Top

Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх ” на анимированную:

24. Fancy Hover

Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:

25. Reminders Icon Hover Effect

Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite :

26. Circle Image Hover

Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля :

27. Safari Icon Hover Effect

Этот эффект представляет собой воссоздание анимации иконки браузера Safari . Можно без труда заменить иконку собственной картинкой или логотипом.

Кардинально новой стала идея разделить представление информации от кода ее создающего и обрабатывающего. Это было сильное решение в свое время, но этот момент был не признан тогда в полной мере. Когда программирование отделилось от отдельно взятого компьютера, но не стало побеждать в локальной сети или отдельно взятой доменной зоне, а сразу распространилось повсеместно, только тогда стало очевидно, что представление информации (в части дизайна) и работа с ней (в части кода) - две стороны в одной плоскости.

Три грани сайтостроения

С формальной точки зрения есть три основных компонента (в разных синтаксических обликах), которые составляют сайт: PHP-код, JavaScript-код и описания стилей CSS. Абсолютно не важно, как именуется и какой версии используется тот или иной компонент, какая версия HTML разметки используется и какая версия браузера стоит. Совместимость нынче не в почете, потому в каждый момент времени актуально: что закодировано и что из того, что закодировано, может быть отображено и исполнено .

Если раньше за идеи бились языки, то сегодня воевать по-пустому больше нравится производителям стандартов в сфере интернет-технологий и браузеров.

Личное и общественное

Средств, посредством которых доступен Интернет, много (компьютеры, ноутбуки, планшеты, смартфоны), браузеров тоже предостаточно. Нет никакой гарантии, что отдельно взятое устройство отобразит сайт в том виде, в котором его создал разработчик. Не всегда усилия последнего достигают цели и обеспечивают веб-дизайн единой многоликостью, то есть единством отображения сущности, где бы она не открывалась посетителю.

Разделяя личное и общественное, используя в последнем только то, что работает, можно достичь заметных успехов в дизайне. Красота, художественный момент и веб-дизайн - удел соответствующих специалистов и талантов. CSS - это код, хотя и весьма своеобразный. Его забота описать стили (варианты отображения информации). С появлением мобильных устройств CSS подгрузили реальным кодированием в виде медиа-запросов. Так что вариант повторного брака между дизайном и кодом - это не такая уж нереальность, как могло показаться всего пару лет назад.

Разработчик, занимаясь разработкой CSS-стилей, опирается на свой личный проверенный опыт и на те конструкции CSS, которые работают на большинстве браузеров, удовлетворяют большинство посетителей сайта. Следует максимально использовать первое и минимально второе, тогда гораздо больше шансов получить результат, работающий практически всегда и везде.

Первое правило: на стандарт надейся, но и сам не плошай

CSS:hover - это когда мышка «зашла» на элемент страницы. Когда мышка кликнула на элементе, он становится активным, но когда курсор уходит в сторону, он опять может измениться и показать себя в активном состоянии. “:hover”, “active” и “visited” - самые востребованные псевдоклассы при описании стилей.

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

background-color: green;

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

Второе правило: доверяя стандартам, ориентируйся на свой код

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

С другой стороны, только на оснащенных специальным сенсорным экраном гаджетах становится доступным манипулирование пальцами непосредственно на сенсорном экране, как это уже стало привычным на смартфонах, планшетах и подобным им устройствам.

Есть существенная разница и:hover здесь срабатывает вовсе не так, как хотелось бы. Без кода здесь не обойтись, а использование медиазапросов решает не все вопросы.

Совместимость - слишком дорогое удовольствие в современном информационном мире, поэтому, чтобы обеспечить надлежащий функционал сайту в пределах установленных требований к веб-дизайну и реализации функционала, предпочтительно ориентироваться на минимально необходимые варианты использования: CSS hover, CSS hover focus, CSS hover active (visited). Чем больше код (как внутри браузера, так и на сервере,) контролирует веб-дизайн, тем лучше. Программа - это контроль, лучше когда этот контроль не сдается на откуп действующим стандартам, от которых часто не знаешь чего ждать.

Кнопки и другие элементы страницы

Button hover CSS - чудесное решение, но по большому счету каждый элемент страницы есть «кнопка». Сайт должен быть прежде всего живым и если в коде это не заложено, если задача создать сайт, который развивается адекватно области применения и действует с учетом поведения посетителя, то как минимум средствами CSS-стилей можно придать живость элементам страницы.

Использовать hover-эффекты удобно. С их помощью можно легко придать страницам живость, но код не ведает что делает мышка на экране, если в нем нет возможности отслеживать ее движение. С этой точки зрения, то есть когда код контролирует движение мышки (= движение пальца на смартфоне), он может самостоятельно подсвечивать элемент или преобразовывать его. Это не имеет никакого отношения к псевдоклассам, но дает полный контроль кода над внешним обликом страницы, позволяет адекватно отображать ее на различных устройствах в различных браузерах.

Подводные камни в таблицах стилей

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

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

Использование AJAX, когда нет необходимости вновь генерировать страницу чтобы отобразить реакцию на действие посетителя, а достаточно изменить ее элемент или несколько элементов добавляет немного «перца». «Дружба» кодов - того что уже в браузере (JavaScript) и того что на сервере (PHP) - удел автора (программиста) сайта.

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

Стандарт и его эмуляция

Hover может быть эмулировано посредством JavaScript, путем использования событий onmouseover и onmouseout. Часто этим все и заканчивается. С позиций здравого смысла, когда речь идет о создании реально работающего сайта, лучше держать управление в своих руках, чем дарить его на откуп мифическим стандартам, которые меняются вне воли и желания разработчика.

Иногда можно прочитать что-то вроде «данная возможность доступна даже в IE», но чаще можно прочитать о том, какие описания стилей воспринимаются тем или иным браузером. Значительно реже можно узнать про то, как отличается JavaScript в тех или иных браузерах.

Оценивая накопленный опыт, восторгаясь возможностями "Хрома" и "Оперы", критикуя медлительность и инертность браузера от производителя (незабвенного, дорогого сердцу всякого программиста IE от "Майкрософт": «Старый добрый Internet Explorer не ругал только ленивый. Или тот, кто на компьютере умеет только играть в "Косынку"», - цитата неизвестного интернет-автора), следует придерживаться золотой середины: использовать то что работает везде и всегда.

Людям нужны средства для работы, когда им нужно получить острые ощущения они обычно идут в загс или театр, но не в Интернет.

Эмуляция и контроль

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

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

Плавный переход от монохромного изображения к цветному при наведении курсора с использованием jQuery.

3. Hover-эффект с помощью CSS и jQuery

Эффект замены фотографий при наведении курсора мышки. Фотографии представлены в виде спрайтов (несколько фото, объедененных в одну).

4. Анимированный эффект при наведении

jQuery эффект: элемент затемнен до тех пор пока на него не будет наведен курсор мыши. Отличный способ заострить внимание посетителя на каком-нибудь элементе на странице.

5. Смена изображении при наведении курсора мыши с использованием jQuery

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

6. CSS анимированный эффект при наведении

Смена изображений при наведении. Эффект не поддерживает IE.

7. Эффект при наведении с использованием CSS спрайтов и jQuery

Эффект затемнения изображения при наведении на него курсора мыши. Для реализации эффекта используются CSS спрайты.

8. jQuery плагин «jQueryZoom»

С помощью этого плагина вы сможете добавить эффект увеличения изображения при наведении или добавить наложение на него. Плагин легко настроить для ваших нужд.

9. Смена изображений при наведении

Смена изображений при наведении курсора мышки. Вы легко сможете найти применение этому jQuery плагину в интернет-магазинах и каталогах.

10. jQuery эффект плавного изменения цвета при наведении

При наведении курсора мыши на объект, можно изменить цвета определенной части страницы.

11. Плагин jQuery «Hover Image Zoom»

Увеличение изображения при наведении курсора. Эффект приближения.

12. jQuery анимация при наведении

Можно использовать для реализации навигации. Эффект анимации в двух вариантах: с отбрасываемой тенью и с отражением.

13. jQuery эффект при наведении «Images Hover Cycle effect»