Большинство современных веб-сайтов используют каскадные таблицы стилей (CSS). Некоторые сайты используют базовые функции CSS, другие – расширенные, чтобы сделать свои веб-приложения более привлекательными. Добавление эффектов, привлекающих внимание, может повысить процент кликов на вашем сайте, спровоцировать пользователей к действию или даже увеличить время, проведенное ими на вашем сайте. В этой статье мы расскажем о том, что такое эффекты наведения CSS, как они могут сделать ваш сайт привлекательным, как можно реализовать эти эффекты, а также приведем примеры сайтов, на которых реализованы стильные эффекты наведения CSS.
Содержание
скрыть
Эффект CSS hover возникает, когда пользователь сайта наводит курсор (указатель мыши) на элемент. Результатом может быть изменение цвета, текста или другие анимированные эффекты. Такие эффекты добавляются на сайт, чтобы повысить интерактивность и сделать его более удобным для навигации. Эффекты наведения CSS могут выглядеть как переходы или анимация.
Переходы
Такие эффекты позволяют изменить внешний вид или поведение элемента на веб-странице. Однако для этого необходимо наличие триггера, например, наведение пользователя на определенный элемент. Переходы переходят из начального состояния в конечное после срабатывания триггера. Переход выполняется только один раз и не позволяет указывать промежуточные точки.
Анимация
Эти эффекты имеют ключевые кадры, которые позволяют им повторяться в обратном направлении, зацикливаться и переходить из начального состояния в конечное. У этих эффектов также есть промежуточное состояние. Ключевой кадр указывает на то, как анимированные элементы отображаются в определенный момент времени в анимационной последовательности.
Эффекты наведения CSS можно применять к тексту, изображениям, видео, ссылкам или кнопкам. Ниже перечислены основные способы применения:
Такие эффекты подойдут, если вы хотите создать минималистичный сайт. Дизайн должен быть простым, но при этом передавать суть. Он может быть представлен в следующих формах:
- Текстовый эффект терминала: Этот эффект имитирует набор текста на текстовом процессоре. Слова будут мигать, но скорость должна быть достаточной, чтобы пользователи могли дочитать до конца.
- Анимация текста: Текст в этом эффекте может перемещаться вверх, вниз или в сторону.
На обычном сайте есть различные гиперссылки, которые перенаправляют пользователей на разные страницы. Количество таких ссылок постоянно увеличивается по мере роста сайта. Эффекты наведения ссылок могут иметь такие формы;
- Изменение цвета ссылки: цвет ссылки меняется с синего на красный.
- Изменение цвета фона: этот эффект изменяет цвет фона ссылки.
- Смена текста: Этот эффект изменяет содержимое значка ссылки.
Кнопки играют важную роль на веб-сайтах, поскольку они позволяют нам отправлять формы и получать доступ к различным разделам веб-страницы. Эффекты наведения на кнопки могут быть реализованы в виде:
- Изменение цвета текста: Цвет текста на кнопке с надписью “Click Me” может меняться с красного на зеленый при наведении.
- Изменение цвета фона: кнопки HTML по умолчанию прозрачны. Разработчики могут добавить цвет фона для таких кнопок. При наведении на кнопку цвет фона может меняться с коричневого на зеленый.
- Эффект отскока: Вы можете добавить визуальную привлекательность для пользователя, оформив кнопку так, чтобы она отскакивала при наведении.
- Сменные изображения: Вы можете создать карусель изображений, которые сменяют друг друга при наведении.
- Включение/выключение изображений: Такой эффект делает изображения более четкими при наведении на них курсора.
- Тестовый обмен: Очень часто встречаются сайты, которые скрывают различные описания на своих изображениях. Например, туристический сайт может сделать детали отеля видимыми после наведения курсора.
Теперь мы расскажем о некоторых стильных CSS-эффектах наведения для вашего сайта.
Этот эффект можно применить к кнопкам, ссылкам или тексту, отображаемому на веб-странице. Как только курсор мыши коснется цели, цвет фона изменится. Вы можете изменить фон текста, выполнив следующие действия;
- Используйте псевдокласс
:hoverдля достижения своих целей - Создайте элемент, например div, кнопку или ссылку, в котором будет реализован эффект наведения.
Это пример кода для реализации этих эффектов.
HTML-файл
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Документ</title> <link rel="stylesheet" href="style.css"> </head><body> <div>Наведитекурсор и увидите, как я меняюсь!!!!! </div</body></html>Файл CSS
div:hover { background-colour: rgb(255, 0, 0); width: 18rem; align-items: center; text-align: center; }Перед парящим движением вылетит;
После наведения на экран будет выведено сообщение;
Ссылки – важные элементы веб-страницы, поскольку они помогают нам переходить с одной страницы на другую. Для создания гиперссылок мы используем HTML-теги <a>. Изменение цвета ссылки при наведении повышает ее видимость. Чтобы продемонстрировать этот эффект, нам понадобится следующее:
- Создайте тег селектора в теге
:headили:body - Определите псевдокласс
:hover
Вы можете использовать этот пример кода для отображения ссылки, которая при наведении меняет цвет с зеленого на оранжевый.
HTML-файл:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Документ</title> <link rel="stylesheet" href="style.css"> </head><body> <div> <a href="#">Наведитена меня курсори увидите магию</a></div</body></html>Файл CSS:
a:link { color: rgb(0, 255, 34); }a :hover { color: #ff8400; }Вывод перед наведением;
Вывод после наведения эффекта;
Когда пользователь наводит курсор, этот эффект добавляет бокс-тень к встроенной ссылке. При этом цвет ссылки будет изменен. Чтобы добиться этого, вы можете следовать следующим шагам;
- Добавьте отступы по всему периметру ссылки (может подойти что-то вроде 0,25rem).
- Добавьте отступ аналогичной величины. Это не позволит подложке нарушить обтекание текста.
Вы можете использовать это как простой html-файл:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Документ</title> <a href="#">Geekflare</a> <link rel="stylesheet" href="style.css"> </head><body></body></html>.Это может быть ваш файл CSS;
a { box-shadow: inset 0 0 0 0 rgb(255, 21, 0); color: #ff4000; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; }a :hover { color: #fff; box-shadow: inset 200px 0 0 0 0 #ff4000;; } a { color: #ff4000; font-family: 'Poppins', sans-serif; font-size: 27px; font-weight: 700; line-height: 1.5; text-decoration: none; } body { display: grid; }Перед эффектом;
После эффекта наведения;
Этот эффект добавляет к тексту подчеркивание нескольких цветов при наведении.
- Используйте псевдокласс
:linear-gradientдля создания плавного перехода между разными цветами. - Используйте псевдокласс
:hoverдля достижения своих целей. - Создайте элемент ссылки, в котором будет реализован эффект наведения.
Это пример кода для реализации радужного подчеркивания при наведении:
HTML-файл:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Документ</title> <link rel="stylesheet" href="style.css"> </head><body> <div> <p>Это <a href="#">Rainbow</a> эффект наведения. </p> </div</body></html>Файл CSS:
p { max-width: 800px; margin: auto 15%; line-height: 1.1; font-size: 78px; font-weight: 700; letter-spacing:.0125em; color: black;}a { display: inline-block; position: relative; text-decoration: none; color: inherit; z-index: 1;}a::after { content: ''; position: absolute; left: 0; bottom:.07em; height:.1em; width: 100%; background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959); z-index: -1; transition: height .25s cubic-bezier(.6,0,.4,1);}a:hover::after { height:.2em;} p { font-size: 58px; }Перед;
После наведения;
Тестовая замена – это когда текст заменяется на другой фрагмент контента или текста, когда пользователь наводит курсор на цель. Идеальный пример – ссылка “Комментарии” на сайте. После наведения курсора текст ссылки может измениться на “Комментарий“. Чтобы реализовать переключение текста при наведении, вам понадобится следующее:
- Псевдоэлементы
::beforeи::after– они создают отдельный элемент для текста, который будет меняться местами после наведения курсора. :hoverПсевдоэлемент, который изменяет положение или видимость содержимого при наведении.
Вот иллюстрация того, как реализовать этот эффект:
HTML-файл:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Документ</title> <link rel="stylesheet" href="style.css"> </head><body><button><span>99 комментариев</span></button></body></html>.Файл CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Добавить комментарий" }Перед наведением;
После наведения;
Если вы хотите почерпнуть идеи и получить вдохновение, вот несколько сайтов, которые вы можете посетить.
Canva
Canva – это огромное имя в мире дизайна, поскольку она помогает недизайнерам создавать прекрасные проекты. Этот сайт имеет потрясающие эффекты наведения курсора, начиная с главной страницы и заканчивая страницами товаров. Все начинается с темного размытого фона на главной странице. Однако при наведении фон исчезает, и становятся видны изображения. Эффекты наведения также появляются при выборе различных шаблонов дизайна.
Haus
Haus – отличный пример сайта, на котором реализованы подчеркивание при наведении, переключение текста при наведении и изменение цвета фона при наведении.
Mainworks
В Mainworks реализованы анимация и переходы для эффектов наведения. Среди эффектов можно отметить смену текста при наведении, изменение цвета текста, а также масштабирование текста и изображений при наведении.
Заключение
Выбор эффектов наведения для вашего сайта зависит от типа сайта, навыков, вкуса и предпочтений. Некоторые сайты, такие как художественные и купонные платформы, могут приветствовать супермодные эффекты наведения. С другой стороны, юридические и медицинские сайты могут предпочесть минимальные эффекты наведения.
Таким образом, вы должны понять, что подходит именно вашему сайту. Однако убедитесь, что эти эффекты соответствуют цветам вашего бренда.
