Brzi i originalni CSS efekti lebdenja

Stranica koja je napravljena brzo, bez nepotrebnih osnovica i značajnih troškova, s pristojnim dizajnom i potpunom funkcionalnošću - dobar posao i pristojan rezultat.

Izbor izvođača u ovom slučaju je vrlo važan ne samo za vlasnika stranice, već i za prosječnog posjetitelja. Nije svatko voli posjetiti resurse koji koriste sofisticirane alate za demonstraciju njihove dinamike. Stoga, bez obzira na to koliko je čudno, ali umjetnikova predanost korištenju pseudo-klasa kao što je CSS hover je dobar izbor. Jednostavnost je često ključ uspjeha.

Mjesto primjene

CSS hover pseudo-klasa primjenjuje se na ime klase ili imena identifikatora koji opisuje oznaku, što ne mora nužno biti vizualno vidljivo na stranici, nego mora biti dostupno mišu, na primjer, putem CSS z-indeksa.

Ako je pristupačnost dijela oznake dovoljna, CSS hover će raditi. Činjenica da se klasama može manipulirati i graditi iz njihovih imena konstrukti u normalnom stanju stranica oznake i kada je miš iznad njih ne znači da su oznake opisane jedinstvenim identifikatorima ograničene. Sve ovisi o vještini i tehnologiji programera.

Mjesto pod oznakom uvijek ima oblik pravokutnika, ali nekoliko pravila pozadinske slike i pozadinske boje (u vrijednosti transparentne) lako mijenjaju stvari. Slika ne mora biti uključena format .png ili .jpg - možete koristiti jednostavnu .gif animaciju.

Očisti raspored

Stil izgleda ovisi o izvođaču. Ako je ovo CSS ljubavnik, onda bismo trebali očekivati ​​potpuni nedostatak JavaScript koda i šanse da shvatimo kako se formira ova ili ona akcija na stranici. Morat ćemo zakopati puno CSS klasa i uhvatiti njihove međusobne veze prije nego što kreatorova misao postane dostupna.

Ako je izvođač odabrao kombiniranog programera koji posjeduje dovoljno dobro CSS pravila, ali više pozornosti posvećuje HTML oznakama i JavaScript kodu, tada će biti teško razumjeti opcije za dinamički izgled. U ovom slučaju, oznake i CSS pravila pojavit će se iz koda stranice poput gljiva nakon kiše.

Nije najbolja opcija objediniti HTML + CSS koder i HTML + JS koder, ali u praksi to ne funkcionira uvijek. Najbolja opcija je nametnuti vašim programerima zahtjeve, od kojih je jedan CSS lebdenje, a pravila ove vrste su vrlo važna.

To je upravo takav jednostavan slučaj u kojem kupac može odrediti što bi trebalo koristiti. Bilo bi primjerenije primijeniti efekte CSS-a nalik lebdenju. Svi pokušaji da se uđe u besplatno profesionalno plivanje treba zaustaviti u korijenu, čak i prije početka rada na stranicama, inače jednostavno neće biti dovršen.

CSS hover efekt kada lebdi i kada napuštate

Glavno je razumjeti princip, ali je vrlo jednostavan. Demonstriranje svih užitaka pseudo-klasa moguće je samo na dinamičkim ili samo stvarnim stranicama.

Članak je teško opisati. Opća ideja može se vidjeti na slici.

Logika ovdje je jednostavna - postoje dva opisa. Jedan prikazuje oznaku u normalnom stanju, a drugi - u slučaju kada je miš ušao. U drugom slučaju, ": hover" se jednostavno dodaje nazivu klase ili identifikatora. Oba opisa moraju zadovoljiti CSS zahtjeve.

Miš je došao do oznake i ostavio je.

Prihvaćeno je da je u normalnom stanju oznaka statična ako na početku ne bi trebala prikazati nešto dinamično. Budući da pravila za hover CSS, kada lebde, trebaju nešto promijeniti u stilu normalnog stanja oznake.

To nije obvezno načelo. Moguće je i neophodno koristiti punu snagu CSS pravila, posebno prijelaz, neprozirnost, pozadinsku boju, pozadinsku sliku ... Prve dvije su posebno zanimljive - one su same po sebi dinamične.

Još je zanimljivija mogućnost korištenja dinamike kada miš napusti oznaku. Zašto ne? U statičkom stanju stranice ništa nije dinamično, ali ako je dolazak miša na oznaku lebdenje, onda napuštanje može biti živo. Činjenica da pseudo-klasa nije dodijeljena klasi ne znači ništa.

Ugrađivanje međusobnih oznaka, na primjer, niz krugova s ​​polumjerima koji se smanjuju u sredini omogućit će vam stvaranje vala kada pomičete miša. Ako idete dalje, a zatim distribuirate oznake s istim pravilima (u uobičajenoj verziji i CSS lebdenju) na pravim mjestima, na primjer, slobodnim razmacima između blokova informacija, možete prikazati trag miša, valove, bubrenje zaslona ili zamagljivanje granica blokova informacija.

To uopće nije potrebno da lebdeći CSS efekti budu u oznakama iznad blokova informacija. Željene oznake mogu samo paziti. Ali čim miš pređe preko dostupnog dijela, CSS hover stil može podići z-indeks. Kada napustite miš, sve će se vratiti na svoje mjesto.

CSS hover pseudo-klasa u kombinaciji s ispravnom primjenom CSS pravila je dobra, jednostavna, dobro funkcionirajuća stranica.