De fleste moderne nettsteder bruker Cascading Style Sheets (CSS). Noen nettsteder bruker grunnleggende CSS-funksjoner, mens andre bruker avanserte funksjoner for å gjøre nettapplikasjonene mer attraktive.
Å legge til iøynefallende effekter kan forbedre klikkfrekvensen på nettstedet ditt, provosere brukere til å handle, eller til og med øke tiden brukerne bruker på nettstedet ditt.
I denne artikkelen vil vi diskutere hva CSS hover-effekter er, hvordan de kan gjøre nettstedet ditt iøynefallende, hvordan du kan implementere disse effektene, og gi eksempler på nettsteder som implementerer stilige CSS-hover-effekter.
Innholdsfortegnelse
Hva er CSS-hovereffekten?
CSS-hovereffekt oppstår når en nettsidebruker svever over et element ved å bruke markøren (musepekeren). Resultatet kan være en endring i farge, tekst eller andre animerte effekter. Slike effekter legges til et nettsted for å forbedre interaktivitet og gjøre det mer navigerbart.
CSS-hovereffekter kan vises enten som overganger eller animasjoner.
Overganger
Slike effekter lar deg endre utseendet eller oppførselen til et element på en nettside. Det må imidlertid være en trigger, for eksempel en bruker som holder musepekeren over et bestemt element. Overgangene går fra den opprinnelige tilstanden til den endelige tilstanden etter utløseren. En overgang kjører bare én gang og lar deg ikke spesifisere mellompunkter.
Animasjoner
Disse effektene har keyframes, som lar dem gjenta bakover, sløyfe og flytte fra den opprinnelige tilstanden til den endelige tilstanden. Disse effektene har også en mellomtilstand. Et nøkkelbilde indikerer hvordan animerte elementer gjengis på et gitt tidspunkt i animasjonssekvensen.
Typer CSS-hovereffekter
CSS-hovereffekter kan brukes på tekst, bilder, videoer, lenker eller knapper. Følgende er noen av de viktigste applikasjonene:
#1. Tekstsveveeffekter
Slike effekter passer når du ønsker å bygge en minimalistisk nettside. Designet skal være enkelt, men likevel sende budskapet. Det kan komme i følgende former:
- Terminalteksteffekt: Denne effekten etterligner skriving på en tekstprosessor. Ordene vil blinke, men hastigheten skal være riktig nok til at brukerne kan lese gjennom.
- Tekstanimasjon: Tekst i denne effekten kan skylle oppover, nedover eller sidelengs.
#2. Link hover-effekter
Et typisk nettsted vil ha forskjellige hyperkoblinger som omdirigerer brukere til forskjellige sider. Slike lenker fortsetter å øke etter hvert som nettstedet vokser. Link hover-effekter kan komme i disse formene;
- Endring av lenkefarge: Fargen på lenken fra noe sånt som blått til rødt.
- Endre bakgrunnsfarge: Denne effekten endrer bakgrunnsfargen til lenken.
- Tekstbytte: Denne effekten endrer innholdet i lenkeikonet.
#3. Effekter for sveveknapp
Knapper er viktige på nettsteder da de lar oss sende inn skjemaer og få tilgang til ulike deler av en nettside. Hover-effekter på knapper kan implementeres i form av:
- Tekstfargeendring: Fargen på teksten på en knapp som sier «Klikk meg» kan endres fra rød til grønn når du holder musepekeren.
- Endre bakgrunnsfarge: HTML-knapper er gjennomsiktige som standard. Utviklere kan legge til en bakgrunnsfarge til slike knapper. Ved sveving kan bakgrunnsfargen endres fra noe som Brun til Grønn.
- Sprett-effekt: Du kan legge til visuell appell til brukeren ved å designe knappen for å sprette ved sveving.
#4. Bildeeffekter
- Bytt bilder: Du kan lage en karusell med bilder som bytter når du peker.
- Fade inn/ut bilder: En slik effekt gjør bildene klarere når du holder musepekeren over dem.
Testbytte: Det er veldig vanlig å finne nettsider som skjuler ulike beskrivelser på bildene sine. Et reisenettsted kan for eksempel gjøre hotelldetaljer synlige etter at en bruker svever.
Nå kan vi forklare noen stilige CSS-hovereffekter for nettstedet ditt.
Endre bakgrunnsfarge ved å holde musepekeren
Denne effekten kan brukes på knapper, lenker eller tekst som vises på en nettside. Når musepekeren berører målet, endres bakgrunnsfargen.
Du kan endre bakgrunnen til teksten din i disse trinnene;
- Bruk: hover pseudo-klasse for å nå dine mål
- Lag et element som en div, knapp eller lenke der du skal implementere hover-effekten.
Dette er en eksempelkode for å implementere disse effektene.
HTML-fil
<!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-fil
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Før hover, vil ut være;
Etter hover vil utgangen være;
Endre koblingsfarge ved å holde musepekeren
Lenker er viktige elementer på en nettside da de hjelper oss å flytte fra en side til en annen. Vi bruker HTML -tagger for å lage hyperkoblinger. Hvis du endrer lenkefargen ved sveving, øker synligheten til lenker.
Vi trenger følgende for å demonstrere denne effekten:
- Lag en selector-tag på enten :head- eller :body-taggen
- Definer :hover pseudo-klasse
Du kan bruke denne eksempelkoden til å vise en lenke som endres fra grønn til oransje ved sveving.
HTML-fil:
<!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-fil:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Utgang før hover;
Utgang etter sveveeffekt;
Glidende høydepunkt på hover
Når en bruker svever, vil denne effekten legge til en boksskygge til den innebygde lenken. Fargen på lenken vil bli endret i prosessen. For å oppnå dette kan du følge disse trinnene som din guide;
- Legg til polstring rundt hele lenken (noe sånt som 0 .25rem kan fungere)
- Legg til en margin med lignende verdi. Dette forhindrer utfylling i å forstyrre tekstflyten.
Du kan ha denne som din enkle html-fil:
<!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="#">tipsbilk.net</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
Dette kan være din CSS-fil;
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;
}
Før sveveeffekten;
Etter sveveeffekten;
Regnbueunderstreking ved sveving
Denne effekten legger til en understreking av flere farger til tekst når du peker.
- Bruk: lineær gradient pseudoklasse for å skape en jevn overgang mellom forskjellige farger.
- Bruk :hover pseudo-klasse for å nå dine mål.
- Lag et lenkeelement der du skal implementere hover-effekten.
Dette er en eksempelkode for å implementere regnbueunderstreking ved sveving:
HTML-fil:
<!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-fil:
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;
}
Før hover;
Etter hover;
Tekstbytte ved pekeren
Testbytte er når tekst byttes med et annet innhold eller tekst når en bruker svever over målet. Et perfekt eksempel er hvor et nettsted har en «kommentarer»-lenke. Etter at du holder musepekeren, kan lenketeksten endres til «Kommentar».
For å implementere tekstbytte ved sveving trenger du følgende:
- ::before og ::after pseudo-elementer- Disse lager et eget element for teksten som skal byttes etter hover.
- :hover Pseudo-element som endrer posisjonen eller synligheten til innholdet ved hover
Dette er en illustrasjon av hvordan du implementerer denne effekten:
HTML-fil:
<!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-fil:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
Før hover;
Etter hover;
Nettsteder med gode sveveeffekter
Hvis du vil låne ideer og få litt inspirasjon, er dette noen nettsider du kan sjekke ut.
#1. Canva
Canva er et stort navn i designverdenen ettersom det hjelper ikke-designere med å lage vakre design. Denne nettsiden har fantastiske sveveeffekter, fra hjemmet til produktsidene. Det hele starter med en mørk uskarp bakgrunn på hjemmesiden. Bakgrunnen forsvinner imidlertid ved sveving, og bilder blir synlige. Hover-effekter vises også når du velger forskjellige designmaler.
#2. Haus
Haus er et perfekt eksempel på et nettsted som implementerer understreking ved hover, tekstbytte ved hover, og endring av bakgrunnsfarge ved hover.
#3. Hovedverk
Mainworks implementerer både animasjoner og overganger for sveveeffektene. Noen bemerkelsesverdige effekter er å bytte tekst ved sveving, endring av tekstfarge og zooming av tekst og bilder ved hover.
Konklusjon
Valget av sveveeffekter som skal legges til på nettstedet ditt vil avhenge av nettstedets type, ferdigheter, smak og preferanser. Noen nettsteder, for eksempel kunst- og kupongplattformer, kan ønske superflatende sveveeffekter velkommen. På den annen side kan juridiske og medisinske nettsteder velge minimale sveveeffekter.
Derfor må du finne ut hva som fungerer for nettstedet ditt. Sørg imidlertid for at disse effektene stemmer overens med merkevaren din. Sjekk ut våre beste CSS-ressurser for å finpusse CSS-ferdighetene dine.