5 елегантних ЦСС ефеката лебдења за вашу веб локацију [2023]

by
Tweet
Share
Share
Pin

Atraktivni CSS efekti lebdenja za vašu web stranicu

Većina savremenih web lokacija koristi kaskadne stilske liste (CSS). Neke web stranice koriste osnovne CSS funkcije, dok druge primenjuju naprednije tehnike kako bi svoje web aplikacije učinile vizuelno privlačnijim.

Dodavanje efektnih animacija može značajno povećati klikabilnost vaše web lokacije, podstaći korisnike na akciju ili produžiti vreme koje posetioci provode na njoj.

U ovom članku, detaljno ćemo razmotriti šta su to CSS efekti lebdenja, kako oni mogu doprineti atraktivnosti vaše web stranice, kako ih možete implementirati i pružićemo primere sajtova koji koriste elegantne CSS efekte lebdenja.

Šta je CSS efekat lebdenja?

CSS efekat lebdenja se aktivira kada korisnik pređe mišem preko određenog elementa na web stranici. Kao rezultat, može doći do promene boje, teksta ili drugih animiranih efekata. Ovakvi efekti se dodaju kako bi se poboljšala interaktivnost i olakšala navigacija na sajtu.

CSS efekti lebdenja mogu se implementirati putem tranzicija ili animacija.

Tranzicije

Tranzicije vam omogućavaju da postepeno menjate izgled ili ponašanje elementa na web stranici. Ključno je da postoji okidač, na primer, kada korisnik lebdi iznad datog elementa. Tranzicija glatko prelazi iz početnog u krajnje stanje nakon okidanja. Ona se odvija samo jednom i ne dozvoljava definisanje međustanja.

Animacije

Animacije, za razliku od tranzicija, koriste ključne kadrove koji im omogućavaju da se ponavljaju, kreću unazad i prelaze iz početnog u krajnje stanje, uključujući i međustanja. Ključni kadrovi definišu kako će se animirani elementi prikazivati u svakom trenutku animacione sekvence.

Vrste CSS efekata lebdenja

CSS efekti lebdenja se mogu primeniti na različite elemente kao što su tekst, slike, video snimci, linkovi ili dugmad. Neke od glavnih primena su:

#1. Efekti lebdenja na tekstu

Ovi efekti su idealni za kreiranje minimalističkih web stranica gde je jednostavnost dizajna ključna, ali sa jasnom porukom. Možete ih videti u sledećim oblicima:

  • Efekat kucanja teksta: Simulira izgled teksta koji se kuca na procesoru teksta. Reči se pojavljuju postepeno, sa brzinom koja omogućava čitanje.
  • Animacija teksta: Tekst se može pomerati vertikalno, horizontalno ili dijagonalno.

#2. Efekti lebdenja na linkovima

Tipična web lokacija sadrži brojne hiperlinkove koji usmeravaju korisnike na različite stranice. Kako se sajt razvija, broj linkova se povećava. Efekti lebdenja na linkovima mogu se pojaviti u sledećim oblicima:

  • Promena boje linka: Boja linka se menja, na primer, iz plave u crvenu.
  • Promena boje pozadine linka: Menja se boja pozadine linka prilikom lebdenja.
  • Zamena teksta: Sadržaj linka se menja, na primer, prikazuje se druga ikona.

#3. Efekti lebdenja na dugmadima

Dugmad su važna na web stranicama jer omogućavaju podnošenje formulara i pristup različitim delovima web stranice. Efekti lebdenja na dugmadima mogu se primeniti na sledeći način:

  • Promena boje teksta: Boja teksta na dugmetu se menja prilikom prelaska mišem, npr. iz crvene u zelenu.
  • Promena boje pozadine: HTML dugmad su obično transparentna. Programeri mogu dodati boju pozadine koja se menja prilikom lebdenja, npr. iz braon u zelenu.
  • Efekat odbijanja: Dugme može „odskočiti“ pri prelasku mišem, dodajući vizuelnu privlačnost.

#4. Efekti lebdenja na slikama

  • Zamena slika: Možete kreirati karusel slika koje se menjaju prilikom lebdenja.
  • Fade in/out efekat: Slike postaju jasnije pri lebdenju iznad njih.

Zamena teksta: Na web stranicama često se mogu naći skriveni opisi slika. Na primer, web sajt za putovanja može prikazati detalje hotela tek nakon što korisnik pređe mišem preko slike.

Sada ćemo objasniti neke elegantne CSS efekte lebdenja koje možete primeniti na vašoj web lokaciji.

Promena boje pozadine pri lebdenju

Ovaj efekat se može primeniti na dugmad, linkove ili tekst na web stranici. Kada kursor miša dodirne ciljani element, boja pozadine se menja.

Da biste promenili pozadinu teksta, možete koristiti sledeće korake:

  • Koristite :hover pseudo-klasu da postignete željeni efekat.
  • Kreirajte element kao što je div, dugme ili link, na koji ćete primeniti efekat lebdenja.

Ovo je primer koda za implementaciju ovog efekta.

HTML fajl:

<!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 fajl:

div:hover {
    background-color: rgb(255, 0, 0);
    width: 18rem;
    align-items: center;
    text-align: center;
  }

Pre lebdenja, rezultat će biti:

Nakon lebdenja, rezultat će biti:

Promena boje linka pri lebdenju

Linkovi su bitni elementi na web stranici jer nam omogućavaju prelazak s jedne stranice na drugu. Koristimo HTML tag <a> za kreiranje hiperlinkova. Promena boje linka pri lebdenju poboljšava njihovu vidljivost.

Potrebno je sledeće da biste prikazali ovaj efekat:

  • Napravite selektor na <head> ili <body> tagu.
  • Definišite :hover pseudo-klasu.

Možete koristiti sledeći kod za prikaz linka koji menja boju iz zelene u narandžastu pri lebdenju.

HTML fajl:

<!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 fajl:

a:link {
    color: rgb(0, 255, 34);
  }
  a:hover {
    color: #ff8400;
  }

Rezultat pre lebdenja:

Rezultat nakon efekta lebdenja:

Klizno isticanje pri lebdenju

Kada korisnik lebdi, ovaj efekat dodaje senku okvira inline linku. Boja linka se menja tokom procesa. Da biste postigli ovaj efekat, možete pratiti ove korake:

  • Dodajte ispunu oko linka (npr. 0.25rem).
  • Dodajte marginu slične vrednosti. Ovo sprečava ispunu da ometa tok teksta.

Jednostavan HTML fajl:

<!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="#">techblog.co.rs</a>
      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
</body>
</html>

CSS fajl:

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;
  }

Pre efekta lebdenja:

Nakon efekta lebdenja:

Dugina podvlaka pri lebdenju

Ovaj efekat dodaje višebojnu podvlaku tekstu kada se pređe mišem preko njega.

  • Koristite linear-gradient pseudo-klasu da biste stvorili glatku tranziciju između različitih boja.
  • Koristite :hover pseudo-klasu da postignete željeni efekat.
  • Napravite link element na koji ćete primeniti efekat lebdenja.

Ovo je primer koda za implementaciju dugine podvlake pri lebdenju:

HTML fajl:

<!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 fajl:

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;
    }

Pre lebdenja:

Nakon lebdenja:

Zamena teksta pri lebdenju

Zamena teksta se dešava kada se jedan deo teksta ili sadržaja zameni drugim kada korisnik pređe mišem preko određenog elementa. Primer je kada na web stranici imate link „komentari“, koji se, nakon prelaska mišem, može promeniti u „Dodaj komentar“.

Da biste primenili zamenu teksta pri lebdenju, potrebno je:

  • Pseudo-elementi ::before i ::after – oni kreiraju poseban element za tekst koji će zameniti originalni tekst nakon lebdenja.
  • :hover pseudo-element koji menja poziciju ili vidljivost sadržaja prilikom lebdenja.

Ovo je primer kako implementirati ovaj efekat:

HTML fajl:

<!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 fajl:

button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }

Pre lebdenja:

Nakon lebdenja:

Web lokacije sa odličnim hover efektima

Ako tražite inspiraciju, evo nekih web stranica koje možete pogledati:

#1. Canva

Canva je poznata u svetu dizajna jer omogućava i onima koji nisu dizajneri da kreiraju lepe vizuale. Ova web stranica ima sjajne efekte lebdenja, od početne do stranica sa proizvodima. Na početnoj stranici pozadina je tamna i zamagljena, ali se briše kada pređete mišem, otkrivajući slike ispod. Efekti lebdenja se takođe pojavljuju pri odabiru različitih šablona.

#2. Houzz

Houzz je odličan primer sajta koji koristi podvlačenje pri lebdenju, zamenu teksta i promenu boje pozadine.

#3. Mainworks

Mainworks primenjuje i animacije i tranzicije za efekte lebdenja. Neki od značajnih efekata uključuju zamenu teksta pri lebdenju, promenu boje teksta, kao i zumiranje teksta i slika.

Zaključak

Izbor efekata lebdenja za vašu web lokaciju zavisiće od tipa web stranice, vaših veština, ukusa i preferencija. Neki sajtovi, poput platformi za umetnost i kupone, mogu koristiti upadljive efekte lebdenja. Dok se pravne i medicinske stranice mogu odlučiti za minimalne efekte. Razmislite šta je najbolje za vašu web stranicu. Uverite se da su ovi efekti usklađeni sa bojama vašeg brenda. Pogledajte naše najbolje CSS resurse da biste poboljšali svoje CSS veštine.