Většina moderních webových stránek používá kaskádové styly (CSS). Některé weby používají základní funkce CSS, zatímco jiné používají pokročilé funkce, aby byly jejich webové aplikace atraktivnější.
Přidáním poutavých efektů můžete zlepšit míru prokliku na vašem webu, vyprovokovat uživatele k akci nebo dokonce zvýšit dobu, kterou uživatelé na vašem webu stráví.
V tomto článku budeme diskutovat o tom, co jsou efekty hoveru CSS, jak mohou udělat váš web atraktivním, jak můžete tyto efekty implementovat a uvedeme příklady webů, které implementují elegantní efekty hover CSS.
Table of Contents
Co je efekt přechodu CSS?
Efekt přechodu CSS nastává, když uživatel webu najede kurzorem (ukazatelem myši) na prvek. Výsledkem může být změna barvy, textu nebo jiných animovaných efektů. Tyto efekty se přidávají na webovou stránku, aby se zlepšila interaktivita a byla snadnější navigace.
Efekty přechodu CSS se mohou objevit jako přechody nebo animace.
Přechody
Tyto efekty vám umožňují změnit vzhled nebo chování prvku na webové stránce. Musí však existovat spouštěč, například uživatel najede na konkrétní prvek. Přechody se po spuštění přesunou z počátečního stavu do konečného stavu. Přechod se spustí pouze jednou a neumožňuje určit mezilehlé body.
Animace
Tyto efekty mají klíčové snímky, které jim umožňují opakovat se zpětně, opakovat smyčku a přecházet z počátečního stavu do konečného stavu. Tyto efekty mají také přechodný stav. Klíčový snímek označuje, jak se animované prvky vykreslují v daném čase v sekvenci animace.
Typy efektů přechodu CSS
Efekty přechodu CSS lze použít na text, obrázky, videa, odkazy nebo tlačítka. Níže jsou uvedeny některé z hlavních aplikací:
#1. Efekty přejetí textu
Takové efekty jsou vhodné, když chcete vytvořit minimalistický web. Design by měl být jednoduchý, ale přesto předat zprávu. Může přijít v následujících formách:
- Terminálový textový efekt: Tento efekt napodobuje psaní na textovém procesoru. Slova budou blikat, ale rychlost by měla být dostatečná, aby uživatelé mohli číst.
- Animace textu: Text v tomto efektu může splývat nahoru, dolů nebo do stran.
#2. Efekty při najetí na odkaz
Typický web bude mít různé hypertextové odkazy, které uživatele přesměrují na různé stránky. Takových odkazů neustále přibývá, jak web roste. Efekty najetí na odkaz mohou mít tyto formy;
- Změna barvy odkazu: Barva odkazu z modré na červenou.
- Změna barvy pozadí: Tento efekt změní barvu pozadí odkazu.
- Výměna textu: Tento efekt změní obsah ikony odkazu.
#3. Efekty po najetí na tlačítko
Tlačítka jsou na webových stránkách důležitá, protože nám umožňují odesílat formuláře a získat přístup k různým částem webové stránky. Efekty přechodu na tlačítka lze implementovat ve formě:
- Změna barvy textu: Barva textu na tlačítku s nápisem „Klikni na mě“ se může při umístění kurzoru změnit z červené na zelenou.
- Změna barvy pozadí: Tlačítka HTML jsou ve výchozím nastavení průhledná. Vývojáři mohou k takovým tlačítkům přidat barvu pozadí. Při vznášení se barva pozadí může změnit z něčeho jako hnědá na zelenou.
- Efekt odrazu: Můžete přidat vizuální přitažlivost pro uživatele tím, že navrhnete tlačítko, které se odrazí při umístění kurzoru.
#4. Efekty vznesení obrázku
- Zaměnit obrázky: Můžete vytvořit kolotoč obrázků, které se při umístění kurzoru vyměňují.
- Zatmívání/zatmívání obrázků: Tento efekt činí obrázky jasnějšími, když na ně umístíte ukazatel myši.
Test swap: Je velmi běžné najít webové stránky, které na svých obrázcích skrývají různé popisy. Web o cestování může například zviditelnit podrobnosti o hotelu poté, co uživatel najede kurzorem myši.
Nyní vám můžeme vysvětlit některé elegantní efekty přechodu CSS pro váš web.
Změňte barvu pozadí při najetí myší
Tento efekt lze aplikovat na tlačítka, odkazy nebo text zobrazený na webové stránce. Jakmile se kurzor myši dotkne cíle, změní se barva pozadí.
V těchto krocích můžete změnit pozadí svého textu;
- Použijte:hover pseudotřídu k dosažení svých cílů
- Vytvořte prvek, jako je div, tlačítko nebo odkaz, kde budete implementovat efekt přechodu.
Toto je ukázkový kód pro implementaci těchto efektů.
HTML soubor
<!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 soubor
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Před vznášením bude výstup;
Po umístění kurzoru bude výstup;
Změnit barvu odkazu při najetí myší
Odkazy jsou důležitými prvky na webové stránce, protože nám pomáhají přecházet z jedné stránky na druhou. K vytváření hypertextových odkazů používáme HTML tagy . Změna barvy odkazu při najetí myší zvyšuje viditelnost odkazů.
K prokázání tohoto efektu potřebujeme následující:
- Vytvořte selektorovou značku buď na vaší značce :head nebo :body
- Definujte pseudotřídu :hover
Tento ukázkový kód můžete použít k zobrazení odkazu, který se při najetí myší změní ze zelené na oranžovou.
HTML soubor:
<!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 soubor:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Výstup před vznášením;
Výstup po efektu vznášení;
Posuvné zvýraznění při najetí myší
Když uživatel najede myší, tento efekt přidá k vloženému odkazu stín rámečku. Barva odkazu se během procesu změní. Chcete-li toho dosáhnout, můžete se řídit následujícími kroky;
- Přidejte výplň kolem celého odkazu (může fungovat něco jako 0,25rem)
- Přidejte okraj podobné hodnoty. Tím se zabrání tomu, aby výplň narušila tok textu.
Můžete to mít jako svůj jednoduchý html soubor:
<!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="#">etechblog.cz</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
Může to být váš soubor 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;
}
Před efektem vznášení;
Po efektu vznášení;
Duhové podtržení při najetí myší
Tento efekt přidává textu při umístění kurzoru podtržení několika barvami.
- Use:linear-gradient pseudo-class k vytvoření hladkého přechodu mezi různými barvami.
- K dosažení svých cílů použijte pseudotřídu :hover.
- Vytvořte prvek odkazu, kde budete implementovat efekt přechodu.
Toto je ukázkový kód pro implementaci duhového podtržení při najetí myší:
HTML soubor:
<!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 soubor:
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;
}
Před vznášením;
Po vznášení;
Výměna textu při najetí myší
Testovací záměna je, když je text zaměněn za jiný obsah nebo text, když uživatel najede na cíl. Dokonalým příkladem je, když web obsahuje odkaz „komentáře“. Po umístění kurzoru se text odkazu může změnit na „Komentář“.
Chcete-li implementovat výměnu textu při najetí myší, potřebujete následující:
- Pseudoprvky ::before a ::after- Vytvářejí samostatný prvek pro text, který se má po najetí myší zaměnit.
- :hover Pseudoprvek, který mění polohu nebo viditelnost obsahu při najetí myší
Toto je ilustrace toho, jak tento efekt implementovat:
HTML soubor:
<!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 soubor:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
Před vznášením;
Po vznášení;
Webové stránky se skvělými efekty přechodu
Pokud si chcete vypůjčit nápady a získat nějakou inspiraci, toto jsou některé webové stránky, které si můžete prohlédnout.
#1. Canva
Canva je obrovské jméno ve světě designu, protože pomáhá nedesignérům vytvářet krásné návrhy. Tato webová stránka má úžasné efekty vznášení, od své domovské stránky až po stránky produktů. Vše začíná tmavým rozostřeným pozadím na domovské stránce. Při najetí myší se však pozadí vymaže a obrázky se stanou viditelnými. Efekty přechodu se také objeví, když vyberete různé šablony návrhu.
#2. Haus
Haus je dokonalým příkladem webu, který implementuje podtržení při umístění ukazatele myši, výměnu textu při umístění ukazatele myši a změnu barvy pozadí při umístění ukazatele myši.
#3. Hlavní práce
Mainworks implementuje jak animace, tak přechody pro efekty hoveru. Některé pozoruhodné efekty jsou výměna textu při umístění kurzoru, změna barvy textu a přiblížení textu a obrázků při umístění kurzoru.
Závěr
Výběr efektů přechodu, které chcete přidat na svůj web, bude záviset na typu webu, dovednostech, vkusu a preferencích. Některé weby, jako jsou umělecké a kuponové platformy, mohou uvítat super okázalé efekty vznášení. Na druhou stranu, právní a lékařské webové stránky se mohou rozhodnout pro minimální efekty vznášení.
Musíte tedy zjistit, co na vašem webu funguje. Ujistěte se však, že tyto efekty jsou v souladu s barvami vaší značky. Podívejte se na naše nejlepší zdroje CSS, abyste si vylepšili své dovednosti CSS.