Css cool efekti. Originalni efekti lebdenja za slike u čistom CSS3

Pre svega, za one koji nisu baš u temi ili uopšte nisu u temi, ukratko ću objasniti šta je lebdenje. To su različite vrste efekata (skočni prozori, opisi alata, glatki prijelazi, transformacija, rotacija, zumiranje, pomak, itd.) koji se primjenjuju na elemente web stranice sa kursorom miša na njima. Oni se mogu implementirati kako uz pomoć raznih jQuery dodataka, tako iu čistom.
Danas sam pripremio veliku kolekciju originalnih hover efekata za slike kreirane pomoću CSS3, bez povezivanja javascript biblioteka. Neću govoriti o prednostima i nedostacima implementacije lebdećih efekata u čistom CSS3, ovo je druga tema, samo pogledajte primjere i, ako je potrebno, koristite onaj koji vam se sviđa na svojoj web stranici. Svi efekti predstavljeni u pregledu su snabdjeveni demo primjerom i detaljnom dokumentacijom sa izvorima. Priručnici su uglavnom na buržoaskom, ali sve je manje-više intuitivno.

Samo želim da vam skrenem pažnju na činjenicu da će svi ovi primeri raditi ispravno samo u modernim pretraživačima koji podržavaju CSS3 svojstva.

Kako ne bi narušio cjelokupnu sliku, nije iskrivio nazive efekata strojnim prijevodom (s izuzetkom nekih), ostavio je originale naslova kako ih je programer nazvao.

Vrlo zanimljiv efekat hovera za sličice, koristeći tanke linije u dizajnu i tipografiji. Nekoliko različitih vrsta efekata za pojavu natpisa za slike, meke i nenametljive 3D transformacije i glatke prijelaze pseudoelemenata. Radi samo u modernim pretraživačima.

iHover je impresivna kolekcija čistih CSS3 efekata lebdenja, sa podrškom za Bootstrap 3. Napravljen sa Scss CSS (fajl), koji se lako može menjati pomoću varijabli. Kod je modularan, nema potrebe za uključivanjem cijele datoteke. 30+ različitih efekata u jednom paketu. Sve je prilično dobro dokumentovano i efekti su vrlo jednostavni za korištenje. Sve što treba da uradite je da pravilno postavite HTML oznake i stavite CSS fajl da radi.

Kreira neke jednostavne, ali elegantne efekte lebdenja za natpise slika. Ideja je da se naslov, ime autora i dugme za vezu dramatično pojavljuju kada se lebdi iznad sličica. Za neke efekte se koriste vizuelne 3D transformacije.

Vrlo jednostavan prijelazni efekat, bez ikakvih posebnih zvona i zvižduka, potpuno okrugla slika u okviru, transformira se promjenom fokusa pri lebdenju i to je to.

za CSS3 sličice

Programer pozicionira svoj rad kao primjer galerije slika s prijelaznim efektima kada se napomene (naslovi) pojavljuju za sličice. Deklarisana je snažna podrška za moderne pretraživače, uključujući IE 9+. Naravno, teško je to nazvati punopravnom galerijom, ali efekat izgleda potpisa je prilično zanimljiv.

Još jedan skup CSS pravila za stvaranje impresivnih efekata transformacije kada se lebdi iznad apsolutno kružnih sličica. Paket sadrži 7 vrsta CSS3 prijelaza, vrlo detaljnu dokumentaciju o postavljanju i korištenju. Svi moderni pretraživači podržavaju efekte.

Rotiranje sličica pri lebdenju

Jednostavan efekat rotiranja okruglih sličica kada pređete preko njih kursorom miša je otprilike isti koji možete vidjeti na mom blogu, u najavama postova na glavnoj stranici. Implementiran je u nekoliko redova css koda.

Ako se doslovno prevede: "Seksualni efekat kada lebdite iznad." Naravno, teško da ćete primetiti nešto tako seksi u ovom efektu, osim ako nemate bujnu maštu, ali efekat je na svoj način zanimljiv i vredan pažnje.

Pet različitih efekata lebdenja za slike. Iskačući natpisi u tri varijacije, zavjese u obliku mijenjanja stepena transparentnosti i rotacije uz horizontalno kretanje.

4 vrste animacijskih efekata za natpise slika, implementirane isključivo pomoću CSS3. Različite pozicije bleđenja i efekti tranzicije, sasvim standardne performanse. Da biste razumjeli kako animacija funkcionira, pogledajte izvorni kod demo stranice, nisam našao nikakvu posebnu dokumentaciju.

Sličice obložene galerijom s različitim izgledima natpisa, rotacijom, blijedim, pop, i još mnogo toga. Dokumentacija o korištenju i konfiguriranju je prilično štura, ali ako baš želite, možete to shvatiti.

Ovaj efekat ne predstavlja ništa posebno, banalnu promjenu svjetline slika pri lebdenju, osim što se dodaju elementi animacije. Morat ćete sami shvatiti detalje implementacije proširivanjem izvornog koda demo.

Još jedan set od 10 efekata lebdenja za slike, razne modifikacije sličica pri lebdenju, zumiranje, rotacija, rotacija, bledenje itd.

Razni efekti za animaciju okvira oko slika, izgleda prilično atraktivno, postoji detaljan vodič za postavljanje i korištenje.

Originalni CSS3 efekti lebdenja primijenjeni za efektivno prikazivanje naslova sličica pri lebdenju. Skup CSS pravila uključuje 10 različitih efekata koje možete koristiti zasebno za različite slike. Efekti su zaista impresivni, posebno kada shvatite da je sve urađeno sa CSS3. Detaljan vodič će vam pomoći da shvatite šta je šta.

Ideja je da se kreira SVG koji je oblik pozadine za neku vrstu slova i koji se pretvara u drugi oblik pri lebdenju mišem. Dakle, možete napraviti mnogo različitih opcija, u primjeru su prikazane tri vrste prijelaznih efekata. Lijepa stvar u korištenju SVG-a je da možemo promijeniti veličinu obrasca tako da odgovara roditeljskom kontejneru.

Klizne slike

Suština ovog efekta je da se slika pomera gore-dole kako bi se pojavio potpis. Ako radite sa parametrima stila, mislim da možete postići prilično lijepe efekte, ali po defaultu, sve izgleda vrlo jednostavno.

Sa ovim efektom, sve je jednostavno, natpisi na slikama klize gore desno ili lijevo do dna, u obliku trake sa prozirnom tamnom pozadinom, sve je vrlo jednostavno reformisati korištenjem css svojstava.

Zanimljivo rješenje, minijature su predstavljene u zatamnjenom obliku, kada pređete mišem preko njih, pojavljuju se slike i potpis iskače na svijetloj pozadini.

Natpis slike izlazi iz ugla i širi se dijagonalno preko cijele površine slike.

Još neka zanimljiva rješenja za implementaciju pop-up titlova za sličice slika. U online uređivaču možete eksperimentirati s parametrima i postići impresivnije rezultate.

Skup prekrasnih efekata kada se lebdi iznad sličica, razne vrste izgleda i dizajna natpisa za slike. Tanke linije u kontrastu s blago zatamnjenom pozadinom stvaraju informativne blokove lako čitljive.

Bizarni oblici i efekat zumiranja u kombinaciji sa efektom animacije natpisa na sličicama.

Sjajni efekti preklapanja ikona na sličice slika u različitim varijacijama izgleda. U primjeru se koristi simbol (+) koji je ocrtan u krugu koristeći radijus granice: u CSS-u možete koristiti i ikone fonta kako biste iskačući panel učinili informativnijim.

Primjer kreiranja vizualnog efekta slajdova za objavljivanje volumetrijskih natpisa na slikama koristeći samo CSS3 i HTML5.

6 Naslovi slika

6 Opcije za pojavljivanje iskačućih natpisa za slike pri lebdenju pomoću CSS3. Detaljna lekcija o implementaciji i konfiguraciji, izvori dostupni za preuzimanje.

I na kraju, na kraju, da tako kažem, ne mogu a da ne pomenem najjednostavniji način za kreiranje pop-up naslova za sličicu pomoću CSS3.

O ovoj metodi sam govorio u jednoj od mojih prethodnih lekcija:.

Uz svo poštovanje, Andrew

Vrlo često na web lokacijama možete naići na promjenu ili dugmad kada lebdite. Posebna pseudo-klasa: hover u CSS-u vam omogućava da implementirate zadatak. Danas ćemo razmotriti neke tehnike za pravljenje ovog trika, a u nastavku ćemo objaviti listu najzanimljivijih od njih (sa kratkim opisima/objašnjenjima). Sve opcije dijelimo na:

Ove grupe su vrlo proizvoljne, jer mnogi primjeri se preklapaju i univerzalni su, odnosno mogu se susresti u dizajnu različitih objekata.

Lebdeći efekat u CSS stilovima se dodaje desno od elementa na sledeći način:

a: lebdjeti (boja: crvena;)

Najčešće se mehanizam koristi posebno za veze kako bi se promijenila njihova boja ili dodalo/uklonilo podvlačenje. Međutim, može se dodijeliti drugim blokovima, dugmadima, tekstovima ili koristiti tokom kreiranja.

dugme: lebdi (pozadina: rgba (0,0,0,0); boja: crvena;) .moja slika: lebdi (prozirnost: 0,5; filter: alfa (prozirnost = 50);)

Moderni pretraživači podjednako ispravno percipiraju efekat CSS lebdenja pri lebdenju, iako u starijim verzijama IE 6 i niže on radi isključivo za veze. Osim toga, neki izvori su rekli da to mora biti naznačeno u kodu.

Inače, prilikom postavljanja stilova linkova mogu se dodatno koristiti i sljedeći selektori: link - za stranice koje još nisu posjećene,: posjećene - one na kojima ste već bili +: aktivan definira trenutno aktivnu adresu. Važno je postaviti hover efekat u CSS nakon: link i: posjećeno, ako postoje.

Pređimo s teorije na praksu. Ispod je lista korisnih materijala i isječaka - slijedite veze za pregled izvora.

Hover dugme i efekti veze

Kao što smo već rekli, ovo je najpopularnija kategorija objekata na stranici gdje se ova tehnika pojavljuje. Evo nekoliko opcija na tu temu.

Jednostavni primjeri za dugmad

Sullivan Buttons

Trik je u tome što kada pređete mišem preko različitih tipki, osim promjene boje pozadine, pokreće se i mala animacija sa ikonama (i svaka ima svoju).

CSS ikone na Hoveru

Izbor od 5 jednostavnih opcija za implementaciju zadatka. U svim slučajevima koriste se dodatne ikone koje se pojavljuju desno/lijevo od teksta ili ga zamjenjuju.

Button Hover Efekti

U poređenju s prethodnim primjerom, ovih 12 funkcija okidača izgledaju mnogo zanimljivije, kako vizualno tako i u smislu koda. Ne bez JS.

Nav lebdi

Nekoliko podešavanja koja ga čine neobičnijim od osnovnog svojstva dekoracije teksta. Pozadina dugmeta dodatno je ispunjena različitim vizuelnim efektima.

Informacije o lebdenju

Funkcionalnost opisa alata sada je podržana u svim pretraživačima, ali je možete prilagoditi svojim potrebama. U trenutnom primjeru, pseudo-klasa je pokrenuta za oznaku dfn, izgleda elegantno. Kod je prilično kompaktan HTML + CSS.

Mana dugme

Jedna od najoriginalnijih opcija efekta lebdenja u blokovima je da kada lebdite, to je kao da ga napunite tekućinom. Implementacija koristi CSS, HTML i SVG. Ovaj isječak će definitivno biti dar od Boga u određenoj temi web stranica.

Lebdeći efekti za slike

15 osnovnih trikova

Unatoč činjenici da je članak objavljen davno, metode i dalje rade ispravno. Ovdje su, vjerovatno, sakupljene sve moguće tipične transformacije za grafiku: nekoliko tipova zumiranja, rotacije, zamućenja, c/b, transparentnosti, filtera, sjaja, itd. Vrlo koristan materijal.

Prekrasni efekti lebdećih slika

Izbor od 30 ugodnih i glatkih radnji kada pređete preko slike. Zbog jednostavnih vizualnih manipulacija u vidu zumiranja, dodavanja linija, stvara se dobar kompleksan dojam. Na nekim mjestima naslov se povećava, a kratki opis "povlači". Odlična opcija za portfolio.

Barberpole hover animacija

Na prvi pogled, animacija nije komplicirana, što na kraju izgleda vrlo cool i nestandardno.

CSS efekti lebdenja sa detekcijom pravca

Za veliki izbor srodnih isječaka i kodova, pogledajte ovaj članak sa css-tricks.com. Sve ove primjere objedinjuje činjenica da se u procesu rada određuje lokacija i smjer kretanja kursora. To vam zauzvrat omogućava da kreirate prilično originalne reakcije kada pređete preko elemenata stranice:

U mnogim sofisticiranim rješenjima, Javascript i jQuery za hover efekte mogu uvelike diverzificirati i poboljšati rezultat.

Lebdenje s svjesnim smjera Dobrota

Pločice sa svjesnim smjera koje koriste čisti CSS

Ostatak čipova potražite u originalnom članku.

Animizam

U ovom razvoju postoji preko 100 jednostavnih načina za "animiranje" slika ili objekata pri lebdenju. Uz pomoć ovih funkcija možete implementirati različit izgled dugmadi, naslova, tekstova, društvenih ikona itd. Postoje opcije sa promjenom prikaza slika, preklapanjem prozirne pozadine.

Link sadrži 7 CSS3 efekata lebdećeg naslova - kada će, prilikom prelaska miša preko slike, korisnik videti blok informacija sa naslovom, kratkim opisom i linkom za prelazak. To ne znači da su primjeri vrlo originalni, ali će svakako pomoći u diverzifikaciji projekta statičnog sadržaja.

CSS Hover biblioteke

Hover.css

Projekat sa jednostavnim imenom Hover.css sadrži kolekciju CSS3 efekata za veze, dugmad, blokove itd. Možete koristiti gotov kod i/ili mu dodati vlastite modifikacije. Ovdje ima puno zanimljivih stvari: 2D/3D transformacije, rad sa pozadinama i okvirima, sjenama, ikonama. Rješenje je dostupno u CSS, LESS i Sass formatima.

Imagehover.css

Još jedna biblioteka koja postavlja efekte lebdenja za slike - u besplatnoj verziji naći ćete 44 opcije konverzije (premium set ih sadrži 5 puta više). LESS i SCSS su također podržani ovdje, ovaj slučaj je težak samo 19 kb. Stranica ima stranicu sa demonstracijom svih radnih primjera. Postoje mnoge jedinstvene karakteristike koje nisu viđene gore.

Projekat ima više od 30 različitih tehnika za okrugle i kvadratne objekte. Svi su prilično originalni, praktički nema jednostavnih radnji "jednog elementa" u obliku uobičajenog zumiranja / izlaska. Implementiran čisti CSS3 + HTML zadatak (plus Scss fajlovi uključeni). Odlična kompatibilnost sa Bootstrap 3, postoji dokumentacija.

Ukupno. Nadamo se da su vam ovi css efekti lebdenja prilikom prelaska miša preko slika, blokova, veza i drugih elemenata stranice pomogli da shvatite ovu temu. Možete implementirati najuspješnija, po vašem mišljenju, rješenja na svojim stranicama - bilo da se radi o povezivanju punopravne biblioteke ili jednostavnoj integraciji male verzije koda.

Ako znate još neke zanimljive karakteristike i isječke, pošaljite im URL-ove u komentarima. I u budućnosti ćemo dopuniti članak.