Ефекти наведення CSS: Ключ до інтерактивності веб-сайту
Сьогодні каскадні таблиці стилів (CSS) є невід’ємною частиною веб-розробки. Веб-ресурси варіюються від тих, що використовують базові можливості CSS, до тих, що застосовують його розширені функції для створення привабливіших веб-додатків. Одним зі способів підвищити зацікавленість користувача є використання ефектів наведення CSS.
Застосування привабливих ефектів може суттєво вплинути на кількість кліків, спонукати користувачів до взаємодії та збільшити час їхнього перебування на вашому сайті. У цій статті ми розглянемо, що таке CSS-ефекти наведення, як вони впливають на привабливість веб-сайту, способи їх застосування, а також проаналізуємо приклади ресурсів, які ефективно їх використовують.
Що таке ефект наведення CSS?
CSS-ефект наведення – це візуальна зміна, яка відбувається, коли користувач наводить курсор миші на певний елемент веб-сторінки. Це може бути зміна кольору, тексту або запуск анімації. Ці ефекти підвищують інтерактивність сайту та роблять його більш зручним для користувача.
Ефекти наведення CSS можуть реалізовуватися у вигляді переходів або анімацій.
Переходи
Переходи плавно змінюють вигляд елемента веб-сторінки після певної події, наприклад, наведення курсора. Перехід відбувається одноразово, переміщуючи елемент від початкового до кінцевого стану без проміжних етапів.
Анімації
Анімації дозволяють створювати складніші ефекти за допомогою ключових кадрів, що дає можливість повторювати, зациклювати та переходити між станами. Ключові кадри визначають, як елемент має змінюватися з часом, додаючи проміжні стани.
Різновиди ефектів наведення CSS
Ефекти наведення CSS можуть бути застосовані до тексту, зображень, відео, посилань або кнопок. Розглянемо деякі з найпоширеніших варіантів:
#1. Ефекти наведення тексту
Ці ефекти ідеально підходять для створення мінімалістичного дизайну, який водночас залишається інформативним:
- Ефект термінального тексту: Імітує введення тексту, де слова з’являються поступово, але з достатньою швидкістю для читання.
- Анімація тексту: Текст може розмиватися, переміщуватися вгору, вниз або вбік.
#2. Ефекти наведення курсора на посилання
Посилання є ключовими елементами навігації на сайті. Ефекти наведення роблять їх більш помітними:
- Зміна кольору посилання: Наприклад, зміна з синього на червоний при наведенні.
- Зміна кольору фону: Зміна фонового кольору посилання при наведенні.
- Зміна тексту: Заміна тексту посилання на інший при наведенні.
#3. Ефекти наведення кнопки
Кнопки використовуються для взаємодії з сайтом, і їх візуальне виділення при наведенні покращує зручність використання:
- Зміна кольору тексту: Наприклад, текст на кнопці “Натисни мене” може змінювати колір з червоного на зелений.
- Зміна кольору фону: Зміна кольору фону кнопки з прозорого на певний колір при наведенні.
- Ефект відскоку: Додає анімацію відскоку при наведенні курсора.
#4. Ефекти наведення зображення
- Зміна зображення: Можливість створити карусель, де зображення змінюються при наведенні.
- Поява та зникнення зображень: Зображення стають чіткішими або розмитішими при наведенні.
Тестовий обмін: Зображення можуть приховувати додаткову інформацію, яка стає видимою при наведенні, наприклад, на туристичному сайті – деталі готелю.
Далі ми розглянемо деякі цікаві CSS-ефекти наведення для вашого веб-сайту.
Зміна кольору фону при наведенні
Цей ефект можна застосувати до кнопок, посилань або тексту. При наведенні курсора на елемент, змінюється колір його фону.
Для цього необхідно:
- Використати псевдоклас :hover
- Створити HTML-елемент (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>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
Hover and see me change!!!!!
</div>
</body>
</html>
CSS файл:
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Вигляд до наведення:
Вигляд після наведення:
Зміна кольору посилання при наведенні
Посилання відіграють важливу роль у навігації по сайту. Зміна їх кольору при наведенні підвищує їхню помітність. Для цього використовуємо теги . Для реалізації необхідно:
- Визначити селектор для тегу <a>
- Використати псевдоклас :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>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
<a href="#">Hover over me and see the magic</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>Document</title>
<a href="#">techukraine.net</a>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/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 #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>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
<p>This is <a href="#">Rainbow</a> hover effect. </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>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<button><span>99 comments</span></button>
</body>
</html>
CSS файл:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
Вигляд до наведення:
Вигляд після наведення:
Веб-сайти з гарними ефектами наведення
Розглянемо кілька веб-сайтів, які чудово використовують ефекти наведення:
#1. Canva
Canva — це популярний сервіс для створення дизайнів. Їх веб-сайт має привабливі ефекти наведення, зокрема розмитий фон, який стає чітким при наведенні, та ефекти при виборі шаблонів.
#2. Haus
Haus демонструє ефективне використання підкреслення при наведенні, заміни тексту та зміни кольору фону.
#3. Mainworks
Mainworks використовує анімації та переходи, включаючи зміну тексту, кольору та масштабування елементів при наведенні.
Висновок
Вибір ефектів наведення залежить від типу сайту, цілей та особистих вподобань. Сайти мистецької тематики можуть використовувати яскраві ефекти, а медичні – мінімалістичні. Важливо, щоб ефекти відповідали стилю та кольорам бренду. Розвивайте свої навички CSS, щоб використовувати ефекти наведення максимально ефективно.