Більшість сучасних веб-сайтів використовують каскадні таблиці стилів (CSS). Деякі сайти використовують базові функції CSS, тоді як інші використовують розширені функції, щоб зробити свої веб-додатки більш привабливими.
Додавання ефектів, що привертають увагу, може підвищити кількість кліків на вашому веб-сайті, спонукати користувачів до дій або навіть збільшити час, який користувачі проводять на вашому веб-сайті.
У цій статті ми обговоримо, що таке CSS-ефекти наведення, як вони можуть зробити ваш веб-сайт привабливим, як можна застосувати ці ефекти, а також наведемо приклади веб-сайтів, які використовують класні CSS-ефекти наведення.
Що таке ефект наведення CSS?
Ефект наведення CSS виникає, коли користувач веб-сайту наводить курсор (вказівник миші) на елемент. Результатом може бути зміна кольору, тексту чи інших анімованих ефектів. Такі ефекти додаються до веб-сайту, щоб покращити інтерактивність і зробити його більш зручним.
Ефекти наведення CSS можуть відображатися як переходи або анімації.
Переходи
Такі ефекти дозволяють змінювати вигляд або поведінку елемента на веб-сторінці. Однак має бути тригер, наприклад, користувач наводить курсор на певний елемент. Переходи переміщуються з початкового стану в кінцевий стан після тригера. Перехід виконується лише один раз і не дозволяє вказувати проміжні точки.
анімації
Ці ефекти мають ключові кадри, які дозволяють їм повторювати назад, зациклюватися та переходити від початкового стану до кінцевого. Ці ефекти також мають проміжний стан. Ключовий кадр вказує на те, як анімовані елементи відображаються в певний час у послідовності анімації.
Типи ефектів наведення CSS
Ефекти CSS при наведенні можна застосовувати до тексту, зображень, відео, посилань або кнопок. Нижче наведено деякі з основних програм:
#1. Ефекти наведення тексту
Такі ефекти підходять, коли ви хочете створити мінімалістичний веб-сайт. Дизайн має бути простим, але все одно передавати повідомлення. Він може мати такі форми:
- Ефект термінального тексту: цей ефект імітує введення тексту в текстовому процесорі. Слова блиматимуть, але швидкість має бути достатньою, щоб дозволити користувачам прочитати.
- Анімація тексту: текст у цьому ефекті може розмиватися вгору, вниз або вбік.
#2. Ефекти наведення курсора на посилання
Типовий веб-сайт матиме різні гіперпосилання, які перенаправляють користувачів на різні сторінки. Таких посилань стає все більше, оскільки веб-сайт росте. Ефекти наведення посилання можуть мати такі форми;
- Зміна кольору посилання: колір посилання з синього на червоний.
- Зміна кольору фону: цей ефект змінює колір фону посилання.
- Зміна тексту: цей ефект змінює вміст піктограми посилання.
#3. Ефекти наведення кнопки
Кнопки важливі на веб-сайтах, оскільки вони дозволяють нам надсилати форми та отримувати доступ до різних розділів веб-сторінки. Ефекти наведення курсора на кнопки можна реалізувати у вигляді:
- Зміна кольору тексту: колір тексту на кнопці з написом «Натисни мене» може змінитися з червоного на зелений при наведенні курсора.
- Зміна кольору фону: кнопки HTML прозорі за замовчуванням. Розробники можуть додати до таких кнопок колір фону. Під час наведення курсора колір фону може змінюватися з коричневого на зелений.
- Ефект відскоку: ви можете додати візуальну привабливість для користувача, створивши кнопку, яка відбивається при наведенні.
#4. Ефекти наведення зображення
- Поміняти зображення: ви можете створити карусель із зображеннями, які змінюються при наведенні курсора.
- Поява та зникнення зображень: такий ефект робить зображення чіткішими, коли ви наводите на них курсор.
Тестовий обмін: дуже часто можна знайти веб-сайти, які приховують різні описи на своїх зображеннях. Наприклад, туристичний веб-сайт може зробити деталі готелю видимими після того, як користувач наведе курсор.
Тепер ми можемо пояснити деякі класні ефекти наведення 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>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;
}
Перед наведенням, вихід буде;
Після наведення курсора буде виведено;
Змінити колір посилання при наведенні
Посилання є важливими елементами веб-сторінки, оскільки вони допомагають нам переходити з однієї сторінки на іншу. Ми використовуємо теги HTML для створення гіперпосилань. Зміна кольору посилання під час наведення курсора збільшує видимість посилань.
Для демонстрації цього ефекту нам потрібно наступне:
- Створіть тег вибору на тегу :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>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,25 rem може працювати)
- Додайте маржу аналогічного значення. Це запобігає відступу від переривання потоку тексту.
Ви можете мати це як свій простий файл 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 є чудовим прикладом сайту, який реалізує підкреслення при наведенні, заміну тексту під час наведення та зміну кольору фону при наведенні.
#3. Основні роботи
Mainworks реалізує як анімацію, так і переходи для ефектів наведення. Деякі помітні ефекти: зміна тексту при наведенні, зміна кольору тексту та масштабування тексту та зображень під час наведення.
Висновок
Вибір ефектів наведення курсора для додавання на ваш веб-сайт залежатиме від типу веб-сайту, навичок, смаку та вподобань. Деякі сайти, як-от платформи для мистецтва та купонів, можуть вітати надзвичайно яскраві ефекти наведення. З іншого боку, юридичні та медичні веб-сайти можуть вибрати мінімальний ефект наведення.
Таким чином, ви повинні зрозуміти, що працює для вашого веб-сайту. Однак переконайтеся, що ці ефекти відповідають кольорам вашого бренду. Ознайомтеся з нашими найкращими ресурсами CSS, щоб вдосконалити свої навички CSS.