W dzisiejszych czasach większość stron internetowych opiera się na kaskadowych arkuszach stylów, czyli CSS. Niektóre z nich wykorzystują podstawowe właściwości CSS, podczas gdy inne sięgają po zaawansowane funkcje, aby ich aplikacje webowe prezentowały się bardziej atrakcyjnie i angażująco.
Wprowadzenie efektownych elementów wizualnych może znacząco podnieść liczbę kliknięć na Twojej stronie, zachęcić użytkowników do interakcji, a nawet wydłużyć czas spędzany na witrynie.
W tym artykule przyjrzymy się bliżej efektom najechania kursorem CSS, ich potencjałowi w uatrakcyjnianiu stron, sposobom ich implementacji, a także pokażemy przykłady witryn, które skutecznie wykorzystują te klasyczne efekty.
Czym jest efekt najechania CSS?
Efekt najechania CSS pojawia się w momencie, gdy użytkownik przesuwa wskaźnik myszy (kursor) nad określony element na stronie internetowej. Efektem tego działania może być zmiana koloru, tekstu, czy uruchomienie animacji. Te dynamiczne zmiany są dodawane w celu zwiększenia interaktywności i ułatwienia poruszania się po witrynie.
Efekty najechania kursorem CSS mogą przybierać formę przejść lub animacji.
Przejścia
Przejścia pozwalają na płynną zmianę wyglądu elementu po wystąpieniu określonego zdarzenia, na przykład najechania kursorem. Przejście odbywa się jednorazowo, z punktu początkowego do końcowego, bez możliwości zdefiniowania stanów pośrednich.
Animacje
Animacje, w odróżnieniu od przejść, posiadają klatki kluczowe, co pozwala na ich powtarzanie, zapętlanie, a także definiowanie stanów pośrednich między stanem początkowym i końcowym. Klatki kluczowe określają, jak elementy animowane mają być renderowane w danym momencie sekwencji animacji.
Rodzaje efektów najechania kursorem CSS
Efekty CSS najechania kursorem mogą być stosowane do tekstu, obrazów, filmów, linków czy przycisków. Poniżej przedstawiamy kilka głównych zastosowań:
# 1. Efekty najechania kursorem na tekst
Efekty tego rodzaju idealnie sprawdzają się w minimalistycznych projektach stron, gdzie prostota nie wyklucza efektywnego przekazu. Wśród nich wyróżniamy:
- Efekt terminala: Ten efekt imituje pisanie tekstu w edytorze. Słowa pojawiają się stopniowo, w sposób symulujący wpisywanie, a szybkość ich pojawiania się powinna być dostosowana tak, aby tekst był czytelny.
- Animacja tekstu: Tekst może przesuwać się w górę, w dół lub na boki, tworząc dynamiczny efekt wizualny.
#2. Efekty najechania na link
Każda strona internetowa zawiera hiperłącza, które kierują użytkowników do innych stron. Wraz z rozbudową witryny, liczba linków zazwyczaj rośnie. Efekty najechania na linki mogą przybierać różne formy:
- Zmiana koloru łącza: Standardowy niebieski kolor linku może zmieniać się na inny, np. czerwony, po najechaniu kursorem.
- Zmiana koloru tła: Kolor tła podświetla łącze, gdy kursor się nad nim znajduje.
- Zamiana tekstu: Zawartość ikony lub tekstu łącza może zostać zastąpiona innym tekstem lub ikoną.
#3. Efekty najechania na przycisk
Przyciski odgrywają kluczową rolę na stronach internetowych, umożliwiając przesyłanie formularzy czy dostęp do różnych sekcji. Efekty najechania na przyciski mogą manifestować się poprzez:
- Zmiana koloru tekstu: Kolor napisu na przycisku, np. „Kliknij mnie”, zmienia się z jednego koloru na inny, np. z czerwonego na zielony, po najechaniu kursorem.
- Zmiana koloru tła: Przezroczyste domyślnie przyciski HTML mogą zostać wzbogacone o kolor tła, który zmienia się po najechaniu myszką, np. z brązowego na zielony.
- Efekt odbicia: Przycisk może „odbijać się” lub delikatnie poruszać, gdy użytkownik najedzie na niego kursorem, co dodaje elementu dynamiki.
#4. Efekty najechania na obraz
- Zamiana obrazów: Można stworzyć karuzelę, w której kolejne obrazy pojawiają się po najechaniu kursorem.
- Pojawianie się/zanikanie obrazów: Obrazy stają się bardziej wyraziste i widoczne po najechaniu na nie wskaźnikiem myszy.
Zamiana tekstu: Często na stronach internetowych ukrywa się opisy pod obrazami. Na przykład, na stronie biura podróży, po najechaniu na zdjęcie hotelu, mogą pojawić się jego szczegółowe informacje.
Teraz przejdźmy do omówienia kilku klasycznych efektów najechania kursorem CSS, które możesz wykorzystać na swojej stronie.
Zmiana koloru tła po najechaniu myszką
Ten efekt można zastosować do przycisków, linków lub fragmentów tekstu na stronie. W momencie, gdy kursor myszy znajdzie się nad elementem, jego kolor tła ulega zmianie.
Aby zmienić tło elementu, wykonaj następujące kroki:
- Użyj pseudoklasy `:hover` w CSS.
- Wybierz element, np. `div`, przycisk lub link, do którego chcesz dodać efekt.
Poniżej znajduje się przykładowy kod ilustrujący ten efekt.
Plik 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>
Najedź i zobacz, jak się zmieniam!!!!!
</div>
</body>
</html>
plik CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Przed najechaniem kursorem element wygląda następująco:
Po najechaniu kursorem element wygląda następująco:
Zmiana koloru łącza po najechaniu myszką
Linki są kluczowym elementem nawigacyjnym na stronach internetowych, pozwalającym użytkownikom przechodzić między różnymi sekcjami. Do tworzenia hiperłączy służy znacznik `<a>`. Zmiana koloru linku po najechaniu kursorem zwiększa jego widoczność i sygnalizuje interaktywność.
Aby zaprezentować ten efekt, potrzebujemy:
- Utworzyć selektor dla znacznika `<a>` w sekcji `:head` lub `:body`.
- Zdefiniować pseudoklasę `:hover`.
Poniższy kod ilustruje, jak link zmienia kolor z zielonego na pomarańczowy po najechaniu kursorem.
plik 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="#">Najedź na mnie i zobacz magię</a>
</div>
</body>
</html>
plik CSS:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Wygląd linku przed najechaniem kursorem:
Wygląd linku po najechaniu kursorem:
Przesuwanie podświetlenia po najechaniu kursorem
Ten efekt polega na dodaniu cienia ramki do linku po najechaniu na niego kursorem. Dodatkowo, kolor linku ulega zmianie. Aby to osiągnąć:
- Dodaj wewnętrzny margines wokół łącza (np. 0.25rem).
- Dodaj margines o podobnej wartości, aby uniknąć zakłócenia przepływu tekstu.
Przykładowy kod 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="#">newsblog.pl</a>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
</body>
</html>
Odpowiedni kod 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;
}
Link przed efektem zawisu:
Link po efekcie zawisu:
Tęczowe podkreślenie po najechaniu myszką
Ten efekt dodaje wielobarwne podkreślenie pod tekstem po najechaniu na niego kursorem.
- Użyj pseudoklasy z gradientem liniowym, aby utworzyć płynne przejścia między kolorami.
- Użyj pseudoklasy `:hover`, aby aktywować efekt.
- Wybierz element, np. link, do którego chcesz dodać efekt.
Przykładowy kod, który tworzy efekt tęczowego podkreślenia:
plik 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>To jest efekt <a href="#">Tęcza</a> po najechaniu. </p>
</div>
</body>
</html>
plik 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;
}
Wygląd tekstu przed efektem zawisu:
Wygląd tekstu po najechaniu kursorem:
Zamiana tekstu po najechaniu myszką
Zamiana tekstu polega na zastąpieniu jednego fragmentu treści innym, gdy użytkownik najedzie kursorem na określony element. Przykładem jest link „komentarze”, który po najechaniu kursorem zmienia się na „Dodaj komentarz”.
Aby zaimplementować ten efekt, wykorzystaj:
- Pseudoelementy `::before` i `::after` do utworzenia oddzielnego elementu dla tekstu zamienianego.
- Pseudoelement `:hover`, aby zmienić pozycję lub widoczność treści po najechaniu kursorem.
Poniżej znajduje się przykład implementacji tego efektu:
plik 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 komentarzy</span></button>
</body>
</html>
plik CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Dodaj komentarz" }
Wygląd przycisku przed najechaniem kursorem:
Wygląd przycisku po najechaniu kursorem:
Strony internetowe z doskonałymi efektami najechania kursorem
Jeśli szukasz inspiracji, warto przyjrzeć się następującym stronom:
# 1. Canva
Canva, popularna platforma do projektowania, znana jest z intuicyjnego interfejsu. Strona ta wykorzystuje efekty najechania kursorem od strony głównej po strony produktów. Na stronie głównej po najechaniu kursorem ciemne, rozmyte tło rozjaśnia się, a obrazy stają się widoczne. Podobne efekty pojawiają się także przy wyborze szablonów.
#2. Haus
Haus to przykład strony, która z powodzeniem implementuje efekty podkreślenia po najechaniu kursorem, zamiany tekstu i zmiany koloru tła.
#3. Mainworks
Mainworks wykorzystuje zarówno animacje, jak i przejścia. Efekty warte uwagi to m.in. zamiana tekstu, zmiana koloru, powiększanie tekstu i obrazów po najechaniu kursorem.
Podsumowanie
Dobór efektów najechania kursorem zależy od charakteru strony, umiejętności projektanta, gustu i preferencji. Niektóre witryny, jak platformy graficzne, z pewnością docenią bogate efekty, podczas gdy strony z branży prawnej lub medycznej będą preferować bardziej subtelne rozwiązania. Ważne jest, aby efekty te pasowały do kolorystyki marki i były spójne z całą witryną.
Zapoznaj się z naszymi zasobami CSS, aby udoskonalić swoje umiejętności w tej dziedzinie.