как его применять + 10 хороших идей — JMS University
Автор
WayUp
WayUp — современная образовательная платформа с курсами про дизайн и IT. Здесь получают новые профессии и воплощают мечты в реальность.
На чтение
11 минут
Просмотров
1285
Опубликовано
17 сентября 2022
Сегодня рассмотрим, зачем нужна анимация при наведении курсора. Как оживить статичный сайт, используя лишь базовые знания верстки. Какие ховер-эффекты внедрить легко и уместно почти в любом проекте.
Содержание
- Зачем это нужно?
- 10 идей с ховер-эффектом
- Изменение цвета
- Шейкер
- Подсветка и затухание
- Увеличение/уменьшение
- Добавление текста
- Скругление углов
- Вращение
- Тень или утолщение
- Подчеркивание текста
- Как этому научиться?
Взаимодействие пользователя с сайтом — это важно.
Для этого нужно продумать структуру, грамотно расположить блоки и кнопки, разбавить это все визуалом. Еще один действенный инструмент — ховер-эффект. Это когда объект реагирует при наведении на него курсором. Или сам курсор изменяет свой вид в зависимости от действия.
Самые яркие и привычные примеры: изменение цвета кнопки или ее подрагивание под курсором, изменение цвета ссылки, увеличение картинок в галерее. Вариантов на самом деле очень много. И они ограничены только вашей фантазией и мастерством.
Сайты с ховер-эффектом при любых раскладах смотрятся более живыми и интересными. И конверсия на них тоже выше при прочих равных. Это легко проверить, если запустить статичный сайт, а потом протестировать на нем же несколько ховер-эффектов.
Зачем это нужно? ↑
Есть сразу несколько целей, которые ховер-эффект поможет реализовать:
- Акцентировать внимание – подсветить кнопку, интерактивный элемент.
Такая деталь позволит юзеру быстрее сориентироваться в навигации – если элемент реагирует, то можно нажать на него и что-то произойдет. Это способ сделать так, чтобы посетитель не упустил важные детали. - Информировать – дать подсказку, помочь разобраться в действии. Ховером может быть всплывающий текст или картинка с инструкцией. Такой прием будет удачным для первичных обучающих инструкций в приложениях. А еще это идеальное решение для ситуаций, когда слишком много пояснений будут загромождать страницу или форму.
- Задержать пользователя на сайте – дать ему поиграться с разными деталями. Если вставить интересные пасхалки и сделать разные элементы анимированными, то посетителю просто будет интересно, что же произойдет при наведении. В итоге он не только увеличивает трафик, но и имеет возможность подробнее рассмотреть детали сайта, найти что-то интересное для себя и в итоге совершить конверсионное действие. Внедрение таких штук требует времени и фантазии. Но вы разработаете это один раз, а тысячи посетителей потратят на странице в разы больше времени, чем без ховера.
- Оживить дизайн – если нет другой анимации, видео, гифок и прочих интересных эффектов, то статичный сайт легко преобразить ховер-эффектом. Он может не нести других смыслов и применяться исключительно для декора. Но кто сказал, что эстетика не важна? Интерактивность сегодня практически необходимый критерий для хорошего сайта.
- Структурировать сайт – выделение отдельных элементов поможет просмотреть их более удобно. Например, увеличить окошко с тарифами на услугу. Или подсветить строки/столбцы таблицы. Мелочь, которая поможет расположить к себе пользователя, ведь ему все удобно и понятно.
Такая деталь позволит юзеру быстрее сориентироваться в навигации – если элемент реагирует, то можно нажать на него и что-то произойдет. Это способ сделать так, чтобы посетитель не упустил важные детали.
10 идей с ховер-эффектом ↑
Набросаем десяток популярных проверенных решений и тех, которые будут смотреться круто, но еще не приелись пользователям.
Изменение цвета
Один из самых распространенных способов выделить ссылку, кнопку или элемент меню. Такой подход как раз применяется в целях привлечения внимания и удобства навигации.
Можно настроить инверсию цвета.
Так основная палитра сайта не меняется, но элемент мгновенно получает акцент. А еще классная фишка – добавление цвета на черно-белые изображения. Очень впечатляет, если это галерея фото. Сразу хочется наводить курсор на каждый снимок, чтобы узнать, каков он в цвете. Если применить к этому дополнительно еще и увеличение, то можно из банального альбома создать шедевр.
Появление рамки ↑
Та же история с выделением, но более аккуратным. Не всегда уместно менять цвет элемента, но сделать его более четким необходимо. Особенно это касается изображений и фото – если оттенки кнопки еще легко поменять, то иллюстрацию можно выделить рамкой и от этого она не пострадает. Это к тем вопросам, когда дизайн уже гармоничный и сбалансированный, не хочется ничего лишнего добавить, но подчеркнуть какие-то детали хочется. Можно выбрать плавное или резкое появление рамки, выбрать уровень прозрачности и оттенки.
Шейкер ↑
Легкое подрагивание элемента вы точно видели на кнопках «Позвонить».
Это работает и на других элементах – маленький колокольчик с пояснениями условий акции, шевеление снежинок в новогоднем дизайне. Очень аккуратно будет смотреться на мелких деталях, на которых хотелось бы акцентировать внимание.
Плавность движений зависит от установленных параметров: скорость, количество повторов, длительность движения. Если на определенных элементах выставить разные параметры, то можно добиться интересного эффекта.
Если хочется более сложных эффектов – нужно освоить JavaScript. Тогда можно написать свой CSS-генератор стилей и свойств. Вот здесь посмотрите, как это происходит.
Подсветка и затухание ↑
Это два варианта одного и того же приема, который достигается установкой уровня прозрачности. Если изначально элемент непрозрачный – задайте плавную полупрозрачность, тогда при наведении мыши и элемент будет визуально «затухать». И наоборот.
В основном применяется как раз эффект подсветки, когда кнопка или весь блок становятся четче и ярче при наведении мыши.
Для этого ставится базовая прозрачность, к примеру, 0,6, а при наведении – 1. Прозрачность в 60% вполне читаема и будет хорошо смотреться даже без наведения курсора, что немаловажно.
Увеличение/уменьшение ↑
Отличное решение для галереи, перечня преимуществ с иконками, карточек товаров с описаниями и прочих однотипных элементов. Возможность увеличения – это шанс разместить на странице все необходимые детали, но не перегружать пространство. Любой элемент из ряда однотипных будет увеличиваться при наведении курсора. Это удобно, красиво и эффективно – пользователь рассмотрит товар, прочтет условия или описания.
Та же история и с уменьшением. Прием используется реже, чем увеличение, но все же может понадобиться в определенных случаях. Чтобы реализовать уменьшение при наведении курсора, нужно сделать те же манипуляции, только присваивать коэффициент меньше единицы.
Добавление текста ↑
Лишний раз объяснять не нужно – это способ дать пояснение или подсказку, но не загромождать страницу текстом.
Например, сложная схема устройства. Вы размещаете рисунок с точками на ключевых деталях. При наведении на точку появляется текст. Удобно, наглядно, ничего лишнего. Это может работать как пасхалка – при наведении курсора на фото менеджера можно показать, сколько лет он уже работает в отрасли, сколько клиентов привел к успеху и какой промокод примет для предоставления скидки.
Скругление углов ↑
Прием, который как и рамка – не будет слишком влиять на общий концепт дизайна, не требует серьезных изменений, но при этом поможет ненавязчиво акцентировать внимание на объекте.
Скругление не отвлекает от сути, смотрится аккуратно и приятно для глаза. Если выставить скругление на 10-30 пикселей, то можно получить мимолетную, почти незаметную анимацию. Если поставить 500 пикселей – квадратный объект будет превращаться в круг, прямоугольный получит полностью скругленные края. Используйте для этого в CSS свойство «border-radius».
Вращение ↑
В зависимости от установленных параметров вращение может быть полным и продолжительным или же объект будет проворачиваться совсем немного, напоминая эффект «шейкер».
Применений много – от разового поворота до нескольких повторов. В разные стороны и под разным углом. Вокруг оси. Все зависит от элемента, который должен вращаться.
Совет – не делать полное и быстрое вращение на кнопках и прочих элементах с текстом. Такой прием заставит голову пользователя кружиться, а это не тот эффект, который нам нужен.
Тень или утолщение ↑
Простой и эффектный способ добавить немного объемности элементу. Смотрится уместно почти везде, даже если это flat-design. Иногда важно не искажать деталь никак, но придать ей вес и акцент. Это как раз хороший ховер-эффект в такой ситуации.
Подчеркивание текста ↑
Привычное дело для ссылок и дополнительного текста. Может появляться при наведении мыши, а может быть изначально, но менять цвет. Используйте синий, не нужно других решений. Это уже сложившийся в голове пользователя образ, который не имеет других интерпретаций. Есть синяя подчеркнутая надпись – значит там ссылка.
Разные варианты ховер-эффектов можно совмещать.
И даже из этого перечисленного десятка выйдет огромное количество самых интересных комбинаций. Попробуйте.
Совет: важно не переборщить. Если каждый элемент начинает мельтешить при любом движении курсора, то это будет перебор. Не утомляйте пользователя и не пугайте неоправданной анимацией на каждом шагу. Это же касается и слишком резких или ярких изменений – ховер должен быть ненавязчивым, плавным, иногда даже едва заметным. Исключение, если вы специально делаете сайт в кричащем безвкусном дизайне, который сейчас в тренде.
Как этому научиться? ↑
Подробно о верстке, основах веб-разработки и возможностях CSS3 будет на бесплатном курсе «Веб-верстальщик: начало». Это вариант для новичков, которые только осваивают направление, хотят вникнуть в тонкости, попробовать современную востребованную профессию без затрат.
- CSS
- Веб-дизайн
4 Прикольно!
Оригинальные hover-эффекты для изображений на чистом CSS3
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты.
Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.
Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
Hover Effect Ideas
ДемоДетали
Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
iHover
Демо | Детали
iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.
Caption Hover Effects
ДемоДетали
Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений.
Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
Эффект перехода CSS3
Демо | Детали
Совсем уж простецкий эффект перехода, без особых наворотов, полностью круглое изображение в рамке, трансформируется меняя фокус при наведении и всё.
Hover-эффекты для миниатюр на CSS3
Демо
Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
Circle Hover Effects
ДемоДетали
Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры.
Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
Вращение миниатюр при наведении
ДемоДетали
Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.
Sexy Image Hover Effects
ДемоДетали
Если перевести дословно:”Сексуальный эффект при наведении на изображения“. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
5 Hover-эффектов на CSS3
ДемоДетали
Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.
Анимация подписей изображений
Демо
4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.
Hover-эффекты с элементами анимации
ДемоДетали
Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.
Изменение яркости картинок
Демо
Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.
10 Image Hover Effects
ДемоДетали
Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.
д.
Border Animation Effect
ДемоДетали
Различные эффекты анимации рамки вокруг изображений, смотрится довольно привлекательно, имеется подробное руководство по настройке и использованию.
Original Hover Effects With CSS3
ДемоДетали
Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
Shape Hover Effect
ДемоДетали
Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов.
Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.
Раздвижные изображения
Демо | Детали
Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
Slick CSS3 Animated Image
ДемоДетали
С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
Всплывающая подпись при наведении
ДемоДетали
Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
Диагональное появление подписи
Демо | Детали
Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
Анимированные заголовки миниатюр
ДемоДетали
Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
Подчёркнутые или очерченные подписи к миниатюрам
ДемоДетали
Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
Причудливые формы и zoom-эффект
ДемоДетали
Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
Наложение иконки на изображение
ДемоДетали
Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.
Слайд-эффект для подписей изображений
Демо | Детали
Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
6 Подписей к картинкам
ДемоДетали
6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.
Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.
Оригинал статьи здесь
3 красивых CSS-эффекта при наведении курсора, которые можно добавить в меню Divi
Ваше меню — это первое, что видят посетители, когда заходят на ваш сайт. Вы хотите, чтобы оно выглядело стильно? Конечно, вы делаете! Вот почему в сегодняшней статье я поделюсь тремя способами добавить несколько приятных эффектов при наведении курсора в ваше меню с помощью пользовательского CSS.
Эффекты наведения должны быть незаметными, нам нужен визуальный интерес, но это не самая важная часть сайта, а ваш контент. Это добавит нужное количество «популярности» в вашу навигацию Divi.
Мы добавим не только красивый эффект наведения, но и стиль, примененный к ссылке на активной странице. Например, если пользователь находится на главной странице, к домашней ссылке в меню будет применена какая-то небольшая дизайнерская обработка. Это обычный визуальный маркер, который следует размещать на веб-сайтах, чтобы напомнить пользователю, где он находится на сайте. Это не обязательно, но это хороший полезный UX.
Начнем!
- 1 3 красивых эффекта наведения CSS, которые вы можете добавить в свои меню Divi
- 2 Настройки настройщика темы
- 3
Первый стиль – линия роста снизу
- 3.1 Вдохновение
- 3.2 Выполнение
- 4
Второй стиль – толстый «квадратный» вид с линией внизу.
- 4.1 Вдохновение
- 4.
- 5
Стиль третий – кнопки с фоновым цветом
- 5.1 Вдохновение
- 5.2 Выполнение
- 6
Примеры этих стилей на сайтах Divi «In the Wild»
- 6.1 Полное обслуживание лифта
- 6.2 Детская тема Executive Premium Divi
- 6.3 Терпеть веб-студии
- 7 Подведение итогов
3 красивых CSS-эффекта наведения, которые можно добавить в меню Divi
Подпишитесь на наш канал Youtube
Настройки настройщика тем
Во-первых, для всех стилей мы будем использовать настройки по умолчанию для формата заголовка . Если вы только что установили Divi, вам не нужно настраивать этот параметр, он должен быть установлен автоматически.
Style One – Линия роста под
В этом стиле меню мы добавим линию, которая растет слева направо прямо под пунктом меню, над которым наведен курсор.
Вдохновение
Это действительно хороший эффект, который хорошо работает практически на любом сайте, кроме того, отредактировать код для этого стиля, чтобы изменить цвет и толщину линии, довольно легко для пользователя любого уровня. Это довольно популярный эффект наведения, который я видел на сайтах в течение многих лет. Я думаю, именно тонкость делает его таким универсальным, его можно использовать как на сайте недвижимости, так и на сайте музыканта и во всем, что между ними.
Реализация
Добавьте следующий код в дочернюю таблицу стилей ИЛИ в параметры темы Divi > общие > пользовательское поле CSS :
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
содержание: "";
положение: абсолютное;
z-индекс: 2;
слева: 0;
справа: 0;
}
#top-menu li a:before {
содержание: "";
положение: абсолютное;
z-индекс: -2;
слева: 0;
справа: 100%;
низ: 50%;
фон: #15bf86; /*** ЦВЕТ ЛИНИИ***/
высота: 3 пикселя; /*** ТОЛЩИНА ЛИНИИ ***/
-webkit-transition-свойство: правильно;
свойство перехода: право;
-webkit-transition-duration: 0,3 с;
продолжительность перехода: 0,3 с;
-webkit-transition-timing-function: облегчение;
функция синхронизации перехода: облегчение;
}
#top-menu li a:hover {
непрозрачность: 1 !важно;
}
#top-menu li a:hover:before {
справа: 0;
}
#top-menu li li a:before {
низ: 10%;
}
Style Two – Толстый «квадратный» вид с линией под ним
В этом стиле меню мы будем размещать большую «блочную» линию, которая анимируется вниз от раздела меню под пунктом меню, над которым находится указатель мыши.
Он также размещает массивную рамку над активной ссылкой меню.
Вдохновение
Я сам использую этот стиль в разработанной мной дочерней теме Divi под названием Executive (ниже я приведу ссылку на демо, чтобы вы могли увидеть наведение в действии на реальном сайте). Визуально это не так тонко, как первый стиль, я думаю, что выбор правильного сайта для его использования будет ключевым. Важно, чтобы любые мелкие детали дизайна, такие как эффект наведения, соответствовали общему ощущению сайта.
Реализация
Добавьте приведенный ниже код в таблицу стилей вашей дочерней темы или в пользовательское поле css Divi на вкладке «Общие параметры темы». Что касается простоты редактирования, цвет изменить очень легко, но если вы планируете изменить ширину границы, вам придется поиграть с другими числами в CSS.
#верхнее меню li > a:hover {
box-shadow: 0 10px 0 0 #F15A29 !важно; /*** ЦВЕТ И ТОЛЩИНА ЛИНИИ ПРИ НАВЕДЕНИИ ***/
отступ снизу: 34px;
непрозрачность: 1 !важно;
}
#верхнее меню li li a {
padding-bottom: 6px !важно;
}
#top-menu li. current-menu-item > а,
.et-fixed-header #top-menu li.current-menu-item > a {
граница: 10px сплошная #F15A29; /*** ЦВЕТ И ТОЛЩИНА КОРОБКИ ***/
отступ: 10 пикселей;
нижняя граница: -10px;
}
Style Three – Кнопки с фоновым цветом
Этот стиль меню превращает пункты меню в кнопки с согласованными цветами при наведении. Это также придает другой, отдельный цвет активной ссылке меню.
Вдохновение
Это, конечно, вдохновлено кнопками 😀 Мне очень нравится, как выглядит кнопочная навигация. Я также думаю, что, как и первый стиль, это довольно универсальный вид, который может работать практически на любом сайте. Изменение цвета фона также довольно просто.
Реализация
Как и в случае с двумя другими вышеприведенными стилями, вам нужно добавить приведенный ниже пользовательский код CSS в таблицу стилей вашей дочерней темы или в поле пользовательского CSS на вкладке общих настроек темы Divi. Вы можете вносить свои собственные коррективы и изменения в код (например, цвета), корректируя значения рядом с закомментированными частями кода.
.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
нижний отступ: 15px;
}
#верхнее меню ли {
отступ справа: 5px;
}
#et-top-навигация {
отступ: 20px 0 !важно;
}
#верхнее меню li a {
фон: #C1B2AB; /*** МЕНЯЕТ ЦВЕТ ФОНА ***/
отступ: 15px 20px;
радиус границы: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
цвет: #fff !важно;
}
#top-menu li a:hover {
фон: #559САПР !важно; /*** МЕНЯЕТ ЦВЕТ ФОНА ПРИ НАВЕДЕНИИ ***/
}
#top-menu li.current-menu-item > a {
фон: #edc77b; /*** ИЗМЕНЯЕТ ЦВЕТ ФОНА ССЫЛКИ НА ТЕКУЩУЮ СТРАНИЦУ ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
содержание: нет;
}
Примеры этих стилей на сайтах Divi «In the Wild»
Вот несколько примеров использования этих стилей (или очень похожих) на живых веб-сайтах Divi.
Полное обслуживание лифта
На этом сайте тонкая линия используется в других местах в заголовках, поэтому стиль наведения привязан к общему виду, чтобы он имел смысл.
Посмотреть полный сайт обслуживания лифтов
Детская тема Executive Premium Divi
Как и в приведенном выше примере, стиль толстой линии используется в других частях сайта, чтобы различные элементы дизайна дополняли друг друга.
Посмотреть дочернюю тему Executive Premium Divi
Веб-студии Endure
Итак, мне было очень трудно найти сайт, на котором для каждой ссылки в меню использовались кнопки. Я написал CSS только для этого руководства, но в Endure показано популярное использование одной ссылки в виде кнопки, поэтому третий стиль в этом руководстве просто берет эту идею и использует ее для всех навигационных ссылок.
Посмотреть сайт Endure Web Studios
Подведение итогов
Мы надеемся, что вы сможете найти применение одному или даже всем этим стилям наведения меню на своих веб-сайтах Divi.
Отличительной чертой использования фрагментов из учебных пособий, подобных этому, является тот факт, что даже самый начинающий пользователь может легко реализовать их, придав самому базовому сайту столь необходимое ускорение пользовательского дизайна.
И хотя технически ни один из них на самом деле не использует функцию анимации, создается ощущение, что что-то анимируется, что в наши дни очень популярно и модно.
Сообщите нам в комментариях ниже, о чем вы хотели бы узнать дальше. И не забудьте подписаться на более простые в реализации руководства по Divi от Elegant Themes!
12 библиотек CSS для красивых эффектов при наведении на изображение
Предоставление пользователям возможности легко и четко понять, какая часть веб-страницы является кликабельной , что является важной частью дизайна UX. Старый, но хороший способ сделать это — изменить цвет текста и подчеркнуть его. В настоящее время с помощью CSS существует гораздо больше способов реализовать эффекты наведения, особенно для изображений.
Разработчики теперь могут добавлять эффекты перехода или анимацию при срабатывании события наведения . Мы смотрим на направленные слайды, масштабирование с разной скоростью, постепенное появление и исчезновение, эффекты шарнира, раскрытие прожектора, колебания, отскоки и многое другое.
В этой подборке более 250 эффектов наведения , чтобы вдохновить вас. Вы также можете забрать код в источнике.
Как использовать переходы и анимацию CSS для выделения изменений
Как использовать переходы и анимацию CSS для выделения изменений
Дизайнеры и художники давно экспериментируют с движением, эффектами и различными видами иллюзий с помощью… Подробнее
Image Hover Effects
(16 эффектов)На этой странице вы найдете прекрасную коллекцию из 16 эффектов наведения изображений с подписями. Получите код HTML и CSS для каждого эффекта, наведя курсор на изображение и нажав Показать код .
Анимация подписи к изображению
(4 эффекта) Вот 4 классные анимации подписи, которые запускаются при наведении курсора на изображение. Эффекты созданы с использованием чистых переходов и преобразований CSS3, а не JavaScript, для повышения совместимости в разных браузерах.
iHover
(35 эффектов)iHover — это набор эффектов при наведении на CSS3. Есть 20 эффектов наведения по кругу и 15 эффектов наведения на квадрат. Чтобы использовать эффекты, вам нужно будет написать HTML-разметку и включить файлы CSS.
Image Hover
(44 эффекта)Эта библиотека содержит 44 эффекта, созданных с помощью чистого CSS. Некоторые из эффектов включают исчезновение, толчки, слайды, шарниры, раскрытие, масштабирование, размытие, перевороты, складки и жалюзи в нескольких направлениях. Существует расширенная версия из 216 эффектов, которую можно купить за 14 евро.
Идеи эффекта наведения
(30 эффектов)Эта демонстрация наведения изображения, созданная Codrop, вдохновляет вас на создание плавных переходов между изображениями и подписями к ним. Всего в двух наборах 30 эффектов с учебными пособиями и исходным кодом.
Hover CSS
(108 эффектов) Hover CSS позволяет добавлять эффекты наведения к любому элементу, такому как кнопка, ссылка или изображение.
Эффекты включают 2D-переходы, фоновые переходы, границы, переходы «Тень» и «Свечение» и многое другое. Библиотека доступна в CSS, Sass и LESS.
Анимация
(более 100 эффектов)Более 100 анимаций при наведении на кнопки, наложения, детали, подписи, изображения и кнопки социальных сетей. Все эффекты основаны на CSS3.
Caption Hover Effect
(7 эффектов)В этой коллекции 7 различных эффектов. Все переходы выглядят очень красиво и плавно. Перейдите в раздел учебника, чтобы узнать, как применить эти эффекты в вашем проекте.
CSS эффекты при наведении на изображение
(15 эффектов) Набор простых эффектов наведения, таких как масштабирование, скольжение, поворот, оттенки серого, размытие, непрозрачность и другие базовые эффекты. Вы можете использовать эти эффекты, добавив класс CSS перед вашим тегом фигура .
3D-эффект при наведении с учетом направления
Это очень крутой эффект при наведении, который определяет последнее движение мыши.