5 elegantních efektů CSS pro váš web [2023]
Efekty Hover v CSS: Zvýšení Atraktivnosti Vaší Webové Stránky
Většina dnešních webových prezentací využívá kaskádové styly, známé pod zkratkou CSS. Některé weby se spoléhají na základní CSS, zatímco jiné využívají pokročilé techniky pro dosažení maximální atraktivity svých webových aplikací.
Použitím poutavých efektů můžete markantně zvýšit proklikovost na vašem webu, aktivně motivovat uživatele k interakci a prodloužit čas, který na vašem webu stráví.
V tomto pojednání prozkoumáme podstatu CSS hover efektů, jak mohou váš web učinit přitažlivějším, jak implementovat tyto efekty a představíme příklady webů, které elegantně využívají CSS hover efekty.
Co je to CSS hover efekt?
CSS hover efekt se aktivuje, když uživatel přesune kurzor (myš) nad určitý prvek webové stránky. Výsledkem může být změna barvy, úprava textu nebo různé animované efekty. Cílem těchto efektů je zvýšení interaktivity a intuitivnosti navigace na webu.
Hover efekty v CSS mohou být realizovány formou přechodů nebo animací.
Přechody
Přechody umožňují modifikovat vzhled nebo chování webových prvků. Podmínkou je však spouštěcí událost, například pohyb kurzoru nad prvkem. Přechod pak plynule transformuje prvek z počátečního do konečného stavu. Přechod se provede pouze jednou a neumožňuje definovat mezistavy.
Animace
Animace využívají klíčové snímky, díky kterým se mohou opakovat, smyčkovat a procházet fázemi mezi počátečním a koncovým stavem. Animace umožňují také definovat mezistavy. Klíčový snímek popisuje, jak se animovaný prvek vizualizuje v daném okamžiku animace.
Druhy CSS hover efektů
CSS hover efekty jsou univerzální a lze je aplikovat na text, obrázky, videa, odkazy nebo tlačítka. Níže naleznete přehled hlavních aplikací:
#1. Efekty při najetí na text
Tyto efekty jsou vhodné pro minimalistické webové designy, které mají být jednoduché, ale s jasným sdělením. Efekty mohou mít různé podoby:
- Efekt terminálového textu: Imituje psaní v textovém editoru, kdy slova postupně nabývají formy. Rychlost by měla být optimální, aby uživatel mohl text pohodlně přečíst.
- Animace textu: Text se může plynule posouvat nahoru, dolů nebo do stran.
#2. Efekty při najetí na odkaz
Standardní webová stránka obsahuje množství hypertextových odkazů, které uživatele navigují k různým sekcím stránek. S rostoucím webem přibývá i odkazů. Efekty při najetí na odkaz mohou mít následující formy:
- Změna barvy odkazu: Například změna barvy z modré na červenou.
- Změna barvy pozadí: Modifikuje barvu pozadí odkazu.
- Záměna textu: Mění obsah ikony odkazu.
#3. Efekty při najetí na tlačítko
Tlačítka jsou klíčová pro interakci uživatelů, umožňují odesílání formulářů a navigaci na webu. Efekty při najetí na tlačítko mohou zahrnovat:
- Změna barvy textu: Barva textu na tlačítku se může změnit, například z červené na zelenou, když na něj najedete kurzorem.
- Změna barvy pozadí: Tlačítka HTML jsou standardně průhledná. Vývojáři mohou přidat barvu pozadí. Při hover efektu se tato barva může změnit, například z hnědé na zelenou.
- Efekt odrazu: Tlačítko může při najetí kurzorem mírně „odskočit“ pro zvýšení vizuální atraktivity.
#4. Efekty při najetí na obrázek
- Výměna obrázků: Můžete vytvořit karusel obrázků, které se mění při najetí kurzorem.
- Zesvětlení/ztmavení obrázků: Obrázky se mohou při najetí myší rozjasnit nebo naopak ztmavit.
Test výměny: Často se setkáváme s webovými stránkami, kde se různé popisy skrývají za obrázky. Cestovní web může například zobrazit detaily hotelu po najetí myší.
Nyní si detailněji představíme některé elegantní CSS hover efekty, které můžete na svém webu použít.
Změna barvy pozadí při najetí myší
Tento efekt lze aplikovat na tlačítka, odkazy nebo text na webu. Jakmile se kurzor myši dotkne cílového prvku, barva pozadí se změní.
Pro změnu barvy pozadí textu postupujte podle těchto kroků:
- Využijte pseudotřídu :hover.
- Vytvořte prvek, jako je div, tlačítko nebo odkaz, na kterém chcete efekt aplikovat.
Zde je ukázka kódu pro implementaci tohoto efektu.
HTML soubor
<div>
Najedťe a uvidíte změnu!!!!!
</div>
CSS soubor
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Výsledek před najetím myší;
Výsledek po najetí myší;
Změna barvy odkazu při najetí myší
Odkazy jsou klíčové pro navigaci mezi stránkami. Pro tvorbu hypertextových odkazů se používá HTML tag <a>. Změna barvy odkazu při najetí myší zvyšuje jeho viditelnost.
K implementaci tohoto efektu budete potřebovat:
- Vytvořit selektor pro značku <a> v sekci :head nebo :body.
- Definovat pseudotřídu :hover.
Tento ukázkový kód změní barvu odkazu ze zelené na oranžovou při najetí myší.
HTML soubor:
<div>
<a href="#">Najedťe na mě a uvidíte magii</a>
</div>
CSS soubor:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Výsledek před efektem najetí:
Výsledek po efektu najetí:
Posuvné zvýraznění při najetí myší
Tento efekt přidá stín rámečku a změní barvu odkazu, když uživatel najede myší. Pro dosažení tohoto efektu postupujte následovně:
- Přidejte odsazení (padding) okolo odkazu (např. 0.25rem).
- Přidejte okraj (margin) se stejnou hodnotou. Tím se zabrání narušení toku textu odsazením.
Zde je příklad jednoduchého HTML souboru:
<a href="#">etechblog.cz</a>
A zde je CSS soubor:
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;
}
Výsledek před hover efektem:
Výsledek po hover efektu:
Duhové podtržení při najetí myší
Tento efekt přidá pod text podtržení s duhovými barvami, když na něj najedete myší.
- Pro vytvoření plynulého přechodu mezi barvami použijte pseudotřídu :linear-gradient.
- Využijte pseudotřídu :hover pro definování efektu při najetí.
- Vytvořte odkaz, na který chcete efekt aplikovat.
Zde je příklad kódu pro implementaci duhového podtržení:
HTML soubor:
<div>
<p>Toto je <a href="#">Duhový</a> hover efekt.</p>
</div>
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;
}
Výsledek před hover efektem:
Výsledek po hover efektu:
Výměna textu při najetí myší
Výměna textu je situace, kdy se jeden text zamění za jiný, když uživatel najede na daný element. Například, odkaz "komentáře" se může změnit na "Přidat komentář".
Pro realizaci výměny textu při najetí budete potřebovat:
- Pseudoelementy ::before a ::after – Tyto elementy vytvoří samostatný prvek pro text, který se má zaměnit.
- Pseudotřídu :hover, která změní polohu nebo viditelnost obsahu při najetí.
Následující příklad ilustruje, jak tento efekt implementovat:
HTML soubor:
<button><span>99 komentářů</span></button>
CSS soubor:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Přidat komentář" }
Výsledek před hover efektem:
Výsledek po hover efektu:
Webové stránky s vynikajícími efekty hover
Pokud potřebujete inspiraci, můžete se podívat na následující webové stránky:
#1. Canva
Canva je známá platforma pro design, která pomáhá i laikům vytvářet krásné návrhy. Webové stránky využívají množství efektních hover efektů, od hlavní stránky po produktové stránky. Na hlavní stránce se při najetí myší rozostřené pozadí zprůhlední a objeví se obrázky. Další hover efekty se projeví při výběru různých šablon.
#2. Haus
Haus je příkladem webové stránky, která používá podtržení při najetí, výměnu textu a změnu barvy pozadí.
#3. Mainworks
Mainworks kombinuje animace a přechody pro své hover efekty. Využívá výměnu textu, změnu barvy textu a přiblížení textu a obrázků.
Závěr
Výběr konkrétních hover efektů pro váš web závisí na typu webu, vašich dovednostech, vkusu a preferencích. Některé weby, například umělecké galerie a stránky s kupony, ocení okázalé hover efekty, zatímco právní a lékařské weby mohou preferovat minimalistické efekty. Zvolte efekty, které nejlépe odpovídají charakteru vašeho webu a barevnému schématu vaší značky. Pro zdokonalení vašich CSS dovedností se podívejte na naše další zdroje.
