CSS efekte lebdenja prilično je jednostavno stvoriti, a osnovni efekti lebdenja mogu se brzo i jednostavno implementirati i modificirati uz brojne druge opcije. Cascading style sheets (CSS) je jezik koji se koristi u stvaranju stila i izgleda dokumenta kreiranog u označnom jeziku, a može se koristiti za jednostavno stvaranje efekata lebdenja. Efekti lebdenja su promjene koje se događaju s tekstom, slikama ili drugim objektima u dokumentu kada se pokazivač kojim upravlja miš pređe preko objekta. CSS efekti lebdenja obično se stvaraju unutar CSS koda i mogu se brzo i učinkovito implementirati.
Jedna od najjednostavnijih vrsta CSS efekata lebdenja za stvaranje je učinak koji uzrokuje promjenu veze na web-mjestu kada se pređe mišem iznad. Na primjer, netko će možda htjeti stvoriti tekstualnu vezu koja izgleda kao standardni tekst ili je različite boje od ostatka stranice, ali kada se “pređe mišem” ili “pređe mišem iznad”, ona je podvučena ili podebljana. Kako se to točno radi, obično će ovisiti o točnom kodiranju korištenom na stranici, ali u jednostavnom slučaju CSS efekt lebdenja može se dodati unutar CSS pravila unutar odjeljka “stil”.
Izrađuje se novo pravilo za CSS efekt lebdenja pomoću odgovarajuće oznake za objekt kojem se efekt dodaje. Na primjer, tekst koji se bira može biti dio popisa ili odabran unutar tijela web-stranice. Ovaj tekst bi trebao imati posebnu oznaku povezanu s njim u kodiranju tijela. Uz napomenu ove oznake, pravilo se može kreirati za uspostavljanje CSS efekta lebdenja za sve objekte s tom zadanom oznakom.
Korištenjem teksta, na primjer, ako želite učiniti da veza postane podvučena kada korisnik pređe iznad nje, tada možete započeti označavanjem te veze unutar koda tijela i stvaranjem posebnog pravila za tu oznaku. Unutar ovog pravila možete naznačiti koje boje taj tekst treba biti, tako da se lako izdvaja od okolnog teksta i vizualno naznačuje da bi korisnik mogao htjeti preći preko njega, što bi onda pokrenulo CSS efekt lebdenja. Ovaj efekt se dodaje stvaranjem “pseudo-klase” u oznaci za redak teksta.
Ako je oznaka za tekst, na primjer, bila “a” tada biste koristili pseudo-klasu koja je izgledala kao “a:hover {…}” sa željenim CSS efektom lebdenja naznačenim unutar zagrade. Koristeći prethodni primjer, ako je željeni učinak bio da se tekst podvuče kada se pređe pokazivačem miša, onda bi to glasilo “dekoracija teksta: podcrtavanje;” unutar zagrade. Postoji niz različitih efekata lebdenja koji se mogu kreirati za različite objekte, a svaki ima posebnu naredbu za stvaranje efekta, ali proces je u većini slučajeva sličan.