Prije svega, za one koji još nisu potpuno u temi ili uopće nisu u temi, ukratko ću objasniti što je to. To su različite vrste efekata (skočni natpisi, opisi alata, glatki prijelazi, transformacija, rotacija, povećanje, pomicanje itd. itd.) koji se primjenjuju na elemente web stranice na njima pomoću pokazivača miša. Oni se mogu implementirati pomoću raznih jQuery dodataka ili u čistom .
Danas sam pripremio veliki izbor originalnih efekata lebdenja za slike stvorene pomoću CSS3, bez povezivanja javascript biblioteka. Neću govoriti o prednostima i nedostacima implementacije efekata lebdenja u čistom CSS3, to je druga tema, samo pogledajte primjere i, ako je potrebno, koristite onaj koji vam se sviđa na vašoj web stranici. Svi učinci prikazani u pregledu opremljeni su demo primjerom i detaljnom dokumentacijom s izvornim kodovima. Priručnici su većinom na građanskom jeziku, ali sve je više-manje intuitivno.
Želio bih vam odmah skrenuti pozornost na činjenicu da će svi ovi primjeri ispravno raditi samo u modernim preglednicima koji podržavaju CSS3 svojstva.
Kako ne bih pokvario cjelokupnu sliku, nisam iskrivio nazive efekata strojnim prijevodom (osim nekih), ostavio sam izvorne naslove onako kako ih je programer nazvao.
Vrlo zanimljiv učinak kada lebdite iznad sličica, koristeći fine linije u dizajnu i tipografiji. Nekoliko različitih vrsta efekata za izgled naslova slika, meke i nenametljive 3D transformacije i glatke prijelaze pseudoelemenata. Radi samo u modernim preglednicima.
iHover je impresivna kolekcija čistih CSS3 efekata lebdenja, s podrškom za Bootstrap 3. Izgrađen na Scss CSS (datoteci), lako se mijenja 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 dokumentirano i efekti su vrlo jednostavni za korištenje. Sve što trebate učiniti je ispravno izraditi HTML oznake i uključiti CSS datoteku u svoj rad.
Stvara neke jednostavne, ali elegantne efekte lebdenja za opise slika. Ideja je lebdjeti iznad minijatura kako bi iskočili naslov, ime autora i gumbi za kontakt. Za neke efekte koriste se 3D vizualne transformacije.
Vrlo jednostavan efekt prijelaza, bez ikakvih posebnosti, potpuno okrugla slika u okviru, transformira se promjenom fokusa pri lebdenju i to je to.
Efekti lebdenja za minijature pomoću CSS3
Programer pozicionira svoj rad kao primjer galerije slika s efektima prijelaza kada se komentari (naslovi) pojavljuju na sličicama. Navedena je sigurna podrška modernih preglednika, uključujući IE 9+. Naravno, teško je to nazvati punopravnom galerijom, ali učinak izgleda potpisa prilično je zanimljiv.
Još jedan skup CSS pravila za stvaranje impresivnih efekata transformacije kada lebdite iznad savršeno okruglih minijatura. Paket sadrži 7 vrsta CSS3 prijelaza, vrlo detaljnu dokumentaciju o konfiguraciji i korištenju. Efekte podržavaju svi moderni preglednici.
Rotirajte sličice dok lebdite
Jednostavan efekt rotiranja okruglih sličica kada prijeđete kursorom miša preko njih, otprilike isti možete vidjeti na mom blogu, u najavama postova na glavnoj stranici. Implementirano s nekoliko redaka css koda.
Prevedeno doslovno: "Seksualni učinak kada lebdi iznad ". Naravno, u ovom efektu teško da ćete primijetiti nešto tako seksi, osim ako nemate bujnu maštu, ali efekt je zanimljiv na svoj način i vrijedan je pažnje.
Pet različitih efekata za slike kada prijeđete iznad njih. Pop-up potpisi u tri varijante, zavjese u obliku promjene stupnja prozirnosti i rotacije s horizontalnim kretanjem.
4 Vrste animacijskih efekata za opise slika, implementirane isključivo pomoću CSS3. Različiti položaji prilikom pojavljivanja i efekti prijelaza, prilično standardan dizajn. Da biste razumjeli kako animacija radi, pogledajte izvorni kod demo stranice; nisam našao nikakvu posebnu dokumentaciju.
Minijaturne galerije raspoređene u mrežu s različitim efektima za izgled potpisa, rotaciju, razvijanje, iskakanje itd. Dokumentacija o korištenju i konfiguraciji je prilično oskudna, ali ako stvarno želite, možete to shvatiti.
Ovaj efekt nije ništa posebno, banalna promjena svjetline slika pri lebdenju, osim što su dodani elementi animacije. Morat ćete sami otkriti detalje implementacije postavljanjem izvornog koda demonstracije.
Još jedan set od 10 efekata lebdenja za slike, razne izmjene sličica pri lebdenju, uvećanje, rotacija, rotacija, zatamnjivanje itd.
Razni efekti okvirne animacije oko slika izgledaju prilično atraktivno, postoji detaljan priručnik za postavljanje i korištenje.
Izvorni CSS3 efekti lebdenja koji se koriste za efektivan izgled naslova sličica slike kada se lebdi. Skup CSS pravila uključuje 10 različitih efekata koje možete koristiti zasebno za različite slike. Efekti su doista impresivni, pogotovo ako se uzme u obzir da je sve napravljeno pomoću CSS3. Detaljan vodič pomoći će vam da shvatite što je što.
Ideja je stvoriti SVG koji je oblik pozadine za neki tekst i pretvara se u drugi oblik kada prijeđete mišem. Na taj način možete napraviti mnogo različitih opcija, u primjeru su prikazane tri vrste efekata prijelaza. Prednost korištenja SVG-a je u tome što možemo promijeniti veličinu obrasca kako bi odgovarao veličini nadređenog spremnika.
Klizne slike
Bit ovog efekta je da se slika pomiče gore-dolje kako bi se pojavio natpis. Ako radite s parametrima stila, mislim da možete postići neke prilično lijepe efekte, ali prema zadanim postavkama sve izgleda vrlo jednostavno.
S ovim efektom sve je jednostavno, natpisi za slike klize gore desno ili dolje lijevo, u obliku vrpce s prozirnom tamnom pozadinom, sve se vrlo jednostavno preoblikuje pomoću css svojstava.
Zanimljivo rješenje: sličice su prikazane u zatamnjenom obliku; kada prijeđete pokazivačem iznad njih, slike se pojavljuju, a potpis iskače na svijetloj pozadini.
Natpis za sliku pojavljuje se iz kuta i širi se dijagonalno preko cijelog područja slike.
Još neka zanimljiva rješenja za implementaciju skočnih naslova za sličice slika. U mrežnom uređivaču možete eksperimentirati s parametrima i postići impresivnije rezultate.
Skup prekrasnih efekata kada lebdite iznad minijatura, razne vrste izgleda i dizajna naslova za slike. Tanke linije u kontrastu s blago zatamnjenom pozadinom stvaraju lako čitljive informacijske blokove.
Bizarni oblici i efekt povećanja u kombinaciji s animiranim efektom izgleda naslova za sličice slika.
Prekrasni efekti preklapanja ikona na sličicama slika u raznim varijantama izgleda. U primjeru se koristi simbol (+) ocrtan u krug pomoću rubnog radijusa: u CSS-u također možete koristiti fontove ikona kako biste skočnu ploču učinili informativnijom.
Primjer stvaranja vizualnog efekta slajda za prikaz 3D naslova za slike koristeći samo CSS3 i HTML5.
6 Opisi za slike
6 Mogućnosti za pojavljivanje naslova skočnih slika pri lebdenju pomoću CSS3. Detaljna lekcija o implementaciji i konfiguraciji, izvori dostupni za preuzimanje.
I konačno, na kraju, ne mogu ne spomenuti najjednostavniji način za stvaranje skočnog naslova za sličicu pomoću CSS3.
Govorio sam o ovoj metodi u jednoj od svojih prethodnih lekcija:.
Sa svim poštovanjem, Andrew
Danas ćete pokušati ukrasiti svoju web stranicu ili blog prekrasni efekti za slike pomoću CSS-a i regularni HTML kod. Da, upravo CSS i regularni HTML kod, bez korištenja programskog jezika PHP, JavaScript, jQueri i dr.
Kakvi mogu biti učinci koje sam predložio na blogu:
- glatko povećavanje i smanjivanje slika;
- okomito i vodoravno pomicanje slika;
- nagnite ili potpuno okrenite sliku;
- zaokružiti slike;
I također sljedeće učinke:
- zamutiti, posvijetliti, kontrast, sepija;
- gladak prijelaz sa slike u boji na crno-bijelu;
- inverzija boja.
Da biste upotrijebili kod, trebate prvo kopirati glavni kod, a zatim kod efekta i zalijepiti ga, naravno, na svoj blog ili web stranicu.
Glavni kod
Ovaj kod se odnosi na sve efekte koji će vam biti ponuđeni u nastavku:
* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; ) tijelo ( pozadina: #333 ; ) .pic ( border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; )
Svi stilovi u klasi ".pic" bit će zajednički za sve slike. Sve slike imaju bijeli rub od 10 px (redak #13). Iste dimenzije slike su naznačene za visinu i širinu od 300px (redak br. 15, br. 16). Udaljenost od blokova je 20px (linija br. 17). Kako slika ne bi išla izvan navedenih prolaza, pišemo „preljev: skriveno; " Ako vam sve ovo nije jasno, toplo preporučam čitanje.
Počnimo s učincima.
1. Efekt "Zumiranja".
evo koda:
Redak br. 2 označava put do slike veličine 400 x 400 px.
U CSS zalijepite ovaj kod:
/* povećaj sliku */ .grow img ( visina: 300px; širina: 300px; -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition : sve 1s lakoća; prijelaz: sve 1s lakoća; ) .grow img:hover ( width: 400px; height: 400px; )
Slika je u biti 400 x 400 px, ali mi ćemo je smanjiti da stane u naš blok od 300 x 300 px (redak #3 i #4).
Slika se glatko mijenja u originalnu sliku veličine 400 x 400 piksela (redak #14 i #15). Svojstvo prijelaza odgovorno je za glatku promjenu veličine, gdje je navedena 1 sekunda. (Linija br. 6 - br. 10).
2. Efekt "Smanjivanje".
Zapravo, ovo je isti kod, samo što trebate promijeniti veličinu i slika se glatko smanjuje s velike veličine od 400 x 400 px na 300 x 300 px.
U HTML datoteci između oznaka
zalijepi ovaj kod:
U CSS zalijepite ovaj kod:
/*smanji sliku*/ .shrink img ( visina: 400px; širina: 400px; -webkit-transition: sve 1s jednostavno; -moz-transition: sve 1s lako; -o-transition: sve 1s lako; -ms-transition: all 1s ease; prijelaz: all 1s ease; ) .shrink img:hover ( width: 300px; height: 300px; )
3. Horizontalni pomak efekt
Ovaj učinak mijenja položaj bloka. To jest, ako pokazivač postavite iznad slike, slika će se pomaknuti u stranu.
U HTML datoteku umetnite između oznaka
evo koda:
U retku br. 2 naznačite putanju do slike veličine 600 x 300 px.
U CSS zalijepite ovaj kod:
/*horizontalni pomak slike*/ .sidepan img ( margin-left: 0px; -webkit-transition: margina 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margina 1s lakoća; prijelaz: margina 1s lakoća; ) .sidepan img:hover ( margin-left: -200px; )
Za pomicanje slike ulijevo, svojstvo "margin-left" postavite na "-200". Ako je vrijednost navedena kao "200", pomak će biti udesno.
4. Efekt "Vertikalni pomak".
Zapravo, ovo je isti kod, samo što trebate napisati "margin-top" umjesto svojstva "margin-left" i slika će se glatko pomaknuti prema gore kada zadržite kursor.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*Okomiti pomak slike*/ .vertpan img ( margin-top: 0px; -webkit-transition: margina 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition : margina 1s ease; prijelaz: margin 1s ease; ) .vertpan img:hover ( margin-top: -200px; )
Ako navedete vrijednost "200" u svojstvima "margin-top", slika će se pomaknuti prema dolje.
5. Efekt nagiba
Ovaj efekt će vam omogućiti da malo zakrenete sliku kada prijeđete mišem preko nje.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*nagib slike*/ .tilt ( -webkit-transition: svih 0,5 s lakoća; -moz-transition: svih 0,5 s lakoća; -o-transition: svih 0,5 s lakoća; -ms-transition: svih 0,5 s lakoća; prijelaz : sve lakoće od 0,5 s; ) .tilt:hover ( -webkit-transform: rotirati (-10 stupnjeva); -moz-transform: rotirati (-10 stupnjeva); -o-transform: rotirati (-10 stupnjeva); -ms-transform: rotirati (-10 stupnjeva); transformirati: rotirati (-10 stupnjeva); )
Kada lebdite kursorom, slika će se zarotirati za 10 0 ulijevo (redak br. 11-br. 15). Stupanj rotacije možete povećati sami.
6. Efekt "Rotate Image with Reshape".
Ovo je moj omiljeni efekt. Kada prijeđete mišem preko slike, ona napravi jedan krug rotacije, a kvadratni oblik se promijeni u okrugli.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*rotiranje slike s promjenom oblika*/ .morph ( -webkit-transition: svih 0,5 s lakoća; -moz-transition: svih 0,5 s lakoća; -o-transition: svih 0,5 s lakoća; -ms-transition: svih 0,5 s lakoća; prijelaz: svih 0,5 s lakoća; ) .morph:hover ( radijus granice: 50%; -webkit-transform: rotacija(360deg); -moz-transform: rotacija(360deg); -o-transform: rotacija(360deg) ); -ms-transform: rotiraj (360 stupnjeva); transformiraj: rotiraj (360 stupnjeva); )
“border-radius” s vrijednošću “50%” odgovoran je za zaokruživanje kutova.
Svojstvo transformacije odgovorno je za rotiranje slike za 360 0.
7. Efekt fokusa slike
U ovom efektu nema ništa neobično, on jednostavno zaokružuje sliku i povećava debljinu okvira.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*fokusna slika*/ .focus ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća ; ) .focus:hover ( border: 70px solid #000; border-radius: 50%; )
Ovdje vam je, mislim, sve jasno: border je odgovoran za debljinu okvira, a border-radius za radijus zakrivljenosti.
8. Efekt zamućenja
Kada prijeđete mišem preko jasne slike, ona će postati mutna.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/* zamućenje slike*/ .blur img ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s jednostavnost; ) .blur img:hover ( -webkit-filter: blur(5px); )
Za zamućivanje je odgovorno svojstvo “webkit-filter: blur” s parametrima od 5px.
9. Crno-bijeli efekt
Kada prijeđete mišem preko slike u boji, ona odmah postaje crno-bijela.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*crno-bijela slika*/ .bw ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća; ) .bw:hover ( -webkit-filter: sivi tonovi(100%); )
Filtar “webkit-filter: grayscale” s vrijednošću “100%” određuje koliko je slika crno-bijela. Možete odrediti vlastitu vrijednost od 1%-100%.
10. Efekt posvjetljivanja
Zatamnjena slika, kada prijeđete kursorom miša preko nje, postaje svjetlija.
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*posvijetlite sliku*/ .posvijetlite img ( -webkit-filter: svjetlina(10%); -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; - ms -prijelaz: sve 1s lakoća; prijelaz: sve 1s lakoća; ) .brighten img:hover ( -webkit-filter: svjetlina(100%); )
U početku tamni sliku za “10%” (linija br. 3)
Kada pređete kursorom miša, posvijetli se slika za “100%” (linija br. 12)
11. Sepia efekt
Ovo je također prilično dobar efekt, uz pomoć kojeg će se slika pretvoriti u ton sepije.
U CSS zalijepite ovaj kod:
/* Sepia*/ .sepia img ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća ; ) .sepia img:hover ( -webkit-filter: sepia(100%); )
12. Efekt kontrasta
Mislim da sam naziv već sugerira da kada kursorom prijeđete iznad slike, slika će postati bogatija i kontrastnija.
U HTML datoteku umetnite između oznaka
U CSS zalijepite ovaj kod:
/*Kontrast slike*/ .kontrast img ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća; ) .kontrast img:lebdeći ( -webkit-filter: kontrast(185%); )
Obratite pažnju na liniju broj 11. Ako navedete vrijednost "100%", neće doći do promjena. Ako je postotak veći od "100%", na primjer "185%", slika će postati kontrastnija. Ako je postotak manji od "100%", kao što je "60%", slika će izblijedjeti.
13. Efekt “inverzije”.
Ovo je također jedan od mojih omiljenih efekata. Nekako izgleda "metalno".
U HTML datoteku umetnite između oznaka
evo koda:
U CSS zalijepite ovaj kod:
/*Invertiraj sliku*/ .invert img ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća; ) .invert img:hover ( -webkit-filter: invert(100%); )
Vrijednost inverzije se postavlja od 0% do 100% (linija br. 11).
To je sve! Nadam se da vam se svidio članak! Ako vam se svidjelo kliknite na društvene mreže.
Post sadrži izbor različitih CSS efekata i animacija koje vam mogu biti od koristi u radu, a također će eliminirati potrebu za stalnim korištenjem JavaScripta. Primjeri možda nisu najnoviji ili najneobičniji, ali su po mom mišljenju korisni.
1. CSS3 sat s jQueryjem
Ovaj sat je kreiran pomoću jednog od glavnih CSS3 alata - rotacija i povezivanje JQuery biblioteke.2. CSS analogni sat
Klasičniji, analogni satovi. Izrađuju se korištenjem webkit prijelaza i CSS svojstva transformacije. Ali da bi vrijeme odgovaralo trenutnom, potreban vam je JavaScript.
3. Rotirajuća 3D kocka
Rotacija i kretanje duž stranica kocke vršit će se pomoću standardnih tipki "gore", "dolje", "lijevo" i "desno". Sama 3D figura izgrađena je pomoću webkit-perspective, -webkit-transform i -webkit-transition.
4. Nekoliko 3D kocki na uvlačenje
Ovdje je već predstavljeno nekoliko 3D kocki koje izravno koriste CSS3 i svojstva transformacije i prijelaza. Lebdenje pokazivača iznad kocke uzrokuje njeno pomicanje u stranu, otkrivajući tekst koji se nalazi na drugoj strani oblika.
5. Harmonika meni
Efekt izbornika harmonike temelji se na čistom CSS-u, gdje se klikom na svaki redak otvara dodatni prozor u tijelu samog popisa. Prilagođena animacija u preglednicima koji se temelje na WebKitu.
6. Paralaksno pomicanje s CSS-om
Ovo je animirana animacija pomicanja paralakse koja koristi CSS prijelaze temeljene na WebKitu. Kada zadržite pokazivač miša iznad tekstualnog prozora, zvijezde u pozadini počinju se glatko pomicati u stranu. Stvara se učinak leta.
7. Matrica
Kultni film “Matrix” jedan je od najboljih filmova znanstvene fantastike. Primjer pokazuje kako ponovno stvoriti približno istu nevjerojatnu animaciju (crni ekran s tekućim brojevima) u CSS3.
8. Dinamički palaroidi
Ovaj primjer daje detaljan opis stvaranja animiranih fotografija na temelju CSS3 naredbi. Kada kliknete na sliku, ona se povećava i pomiče u prvi plan.
9. Skaliranje slike
U ovom primjeru, slike se jednostavno povećavaju kada lebdite. Jednostavan, ali ponekad vrlo koristan učinak.
10. Učinci JavaScripta na CSS3
Kao alternativu JavaScriptu, post predlaže sedam CSS3 efekata: razne blokove koji se rotiraju, nestaju, iseljavaju, rastu, itd.
11. DJ Hero virtualne ploče
Ovaj post objašnjava kako stvoriti rotirajuće ploče. Brzina rotacije može se podesiti izravno na zaslonu.
12. Klizni vinil
Efekt klizanja vinilne ploče stvara se korištenjem CSS3 i HTML prijelaza. Takva animacija oživljava web stranicu, dodaje originalnost standardnoj naslovnici albuma itd.
13. Efekti kada lebdite iznad slike
Kada kursorom prijeđete iznad slike, ona se može pomaknuti u stranu, okrenuti se, smanjiti, transformirati iz četvrtaste u okruglu, postati mutna... Jednom riječju, slike će promijeniti svoja svojstva na sve moguće načine.
14. Rotirajući trokut
Kada kliknete na trokut, on se počinje okretati.
15. Prostor
Cijeli kozmički prostor upakiran u CSS. Ovo je primjer rotirajućih slojeva (primjetnije kada smanjite prikaz u pregledniku).
16. “Las Meninas” u 3D
Zanimljiv CSS efekt koji čini poznatu sliku Diega Velazqueza “Las Meninas” trodimenzionalnom.
17. CSS za Mac OS X
Na dnu zaslona nalazi se skup glavnih Mac OS X ikona koje se povećavaju kada se prijeđe pokazivačem. Učinak dodaje dinamiku mjestu.
18. Ulazni modali
CSS3 efekti i svojstva Drop-In Modals pomoći će vam da stvorite brze, animirane i jednostavne modalne promjene.
19. Animiranje objekata
Transformacija mijenja izgled elementa u pregledniku. Prikazano na primjeru rakete koja "leti" s jednog kraja ekrana na drugi. Mogu se koristiti alati za pomicanje, rotiranje itd.
20. Sat u boji
Color Clock se temelji na jQuery i CSS3. Sličan učinak dobro će doći u kontekstu čekanja završetka nekog natječaja, glasovanja i slično.
21. Lightbox galerija s jQuery i CSS3
Ovo je prekrasna galerija koja vam omogućuje sortiranje i raspored slika nasumičnim redoslijedom. Za interaktivnost, galerija koristi JQuery, JQuery UI i JQuery FancyBox dodatak. Lightbox podržava naslov i opis slika, grupira ih i automatski slaže slajdove u nizu.
22. “Elastični” pregledi
Povećaj preglede slika dok lebdite. Dakle, kada kliknete, izbornik se proporcionalno povećava.
23. Dinamičke kartice
Ovaj primjer je dinamički skup kartica koji koristi značajke HTML i CSS3.
24. JQuery klizni izbornik
Primjer kliznog izbornika kreiran je kombinacijom CSS3 i JQueryja. Kada prijeđete pokazivačem iznad slike, pojavljuje se skočni prozor s tekstom.
25. CSS kartice
U primjeru, prelazak miša preko zaglavlja kartica uzrokuje promjenu popisa u nastavku.
26. Izbornik za riblje oko
Primjer pokazuje kako stvoriti izbornik Riblje oko pomoću CSS i SVG animacije. Kao dodatni bonus, demo SVG koristi se u IMG oznaci.
27. Padajući izbornik
Ova vrsta pruža vrlo praktičnu navigaciju kroz glavni izbornik, zahvaljujući korištenju CSS3 prijelaza.
28. Odjave Ratova zvijezda
Poznati špici iz Ratova zvijezda. HTML i CSS bit će dovoljni za njihovo pokretanje.
29. Više efekata ribljeg oka na CSS
Opet, ikone koje se povećavaju kada se prijeđe pokazivačem.
30. Animacija kadar po kadar
Moguće je nekoliko opcija demonstracije.U prvom primjeru, da biste osigurali promjenu okvira, morate kliknuti na sliku. Svaki klik je jedan pokret. Okviri se ponavljaju, stvarajući određenu petlju.
U drugom primjeru, za promjenu okvira, samo pomaknite kursor preko slike. Sukladno tome, brzina animacije ovisit će o brzini kretanja miša.
31. Imperial AT-AT Walker
Još jednom Ratovi zvijezda - ovaj pokretni AT-AT hodač napravljen je pomoću CSS3.
32. Još jedna harmonika CSS
Kada kliknete na red, tablica se širi.
33. Jednostavan klizni izbornik
40. Padajući izbornik
Još jedna opcija za jednostavan i lijep padajući izbornik pomoću CSS-a.
Ako vam se sviđa učinak, možete jednostavno kopirati gotov kod i koristiti ga!
Oživite svoju web stranicu!
Različiti efekti lebdenja mogu dodati svježinu stranicama vaše web stranice. Prije ste za bilo kakav učinak morali raditi s javascriptom, no danas, nakon pojave CSS3 tehnologije, sve se može učiniti i bez korištenja javascripta.
Svi današnji primjeri su implementirani i optimizirani za nove moderne preglednike i sigurno će raditi u njima (na primjer, u Mozilli ili preglednicima iz obitelji WebKit). Ne možemo vas uvjeriti da će raditi u IE-u, ali u najnovijim verzijama efekti će sigurno raditi kako treba. Ali ne zaboravite da je za svaki učinak pripremljena atraktivna opcija vraćanja u slučaju da preglednik i dalje ne podržava učinak.
01. Zumiraj
Demo: Pogledati
Ovaj efekt je vrlo lako implementirati i može se postići na nekoliko načina. Koristili smo metodu u kojoj se svakoj slici dodaje parametar margine, a zatim se prilikom prelaska kursora miša taj parametar uklanja. Recimo da postavka margine počinje na 15 piksela, a pri lebdenju postaje 2 piksela, što uzrokuje da slika poskakuje. Također možete jednostavno koristiti ovaj efekt s tekstom, čak i ako su veze postavljene okomito, a ne vodoravno.
Prijelaz ovdje možete postaviti po vlastitom nahođenju, a učinak će također biti atraktivan bez ikakvog prijelaza. Na primjer, učinak smo učinili malo glatkijim, za što smo mislili da će učinku dodati nešto ljepše.
CSS kod Bump Up efekta
Primjer1 img(
rub: 5px puni #ccc;
plovak: lijevo;
margina: 15px;
-webkit-transition: margina 0,5 s olakšanje;
-moz-prijelaz: margina 0,5 s popuštanje;
-o-prijelaz: margina 0,5 s popuštanje;
}
Primjer1 img: lebdi (
margin-top: 2px;
}
02. Stack & Grow
Demo: Pogledati
Autor ovog efekta očito je želio postići nekakav efekt lava lampe, jer kada kursorom miša prijeđete preko popisa poveznica, svaka slika se polako širi i zatim se vraća na svoju originalnu veličinu.
Za implementaciju ovdje korištene su slike od 400x133 piksela. Zatim im je veličina promijenjena na 300x100 piksela pomoću CSS-a i proširena prelaskom mišem. Budući da je u primjeru cijeli popis poravnat po sredini, nova veličina slika prelomila je cijelo poravnanje. Ovaj se problem može riješiti postavljanjem negativnih margina na polovicu širine uvećanih slika.
CSS kod za Stack & Grow
/*Primjer 2*/
#kontejner (
širina: 300px;
margina: 0 auto;
}
#ex2 img(
visina: 100px;
širina: 300px;
margina: 15px 0;
-webkit-transition: sve 1s jednostavnost;
-moz-prijelaz: sve 1s lakoća;
-o-prijelaz: sve 1s lakoća;
}
#ex2 img: lebdite (
visina: 133px;
širina: 400px;
margin-lijevo: -50px;
}
03. Izbljeđivanje teksta
Demo: Pogledati
Ovdje je autor želio stvoriti nešto poput događaja tipa javascript gdje lebdite iznad jedne stavke, a učinak se prikazuje na drugoj. Ovdje su tekst i slika snimljeni i zatim stavljeni u zaseban lijevo poravnat div. Zatim su divu dodani parametri color: transparent i line-height: 0px. To nam je omogućilo da postavimo tekst uz gornji rub diva i potpuno ga sakrijemo.
Da bi se tekst ponovno pojavio, jednostavno promijenimo boju i visinu linije. Kada prijeđete pokazivačem iznad slike, tekst se ponovno pojavljuje. Vrlo smiješan i jednostavan učinak.
Fade Text In Effect CSS kod
#ex3 (
širina: 730px;
visina: 133px;
visina linije: 0px;
boja: prozirna;
veličina fonta: 50px;
obitelj-fontova: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
težina slova: 300;
transformacija teksta: velika slova;
}
#ex3: lebdjeti (
line-height: 133px;
boja: #575858;
}
#ex3 img(
plovak: lijevo;
margina: 0 15 px;
}
04. Kriva fotografija
Demo: Pogledati
Ovaj efekt je vrlo jednostavan, ali bio bi izvrstan za galeriju sličica. Za početak morate stvoriti mrežu slika, a zatim rotirati slike kada prijeđete iznad njih, što stvara atraktivan učinak.
Postoji mnogo novih CSS vrijednosti koje se ovdje mogu koristiti, pa vrijedi razmotriti i vraćanje na ranije verzije preglednika. Naša galerija će koristiti prijelaze, transformacije i blok sjene, međutim, na vaš zahtjev. Transformacija će biti odgovorna za rotaciju slike, a prijelazi će biti odgovorni za meki i glatki efekt.
Ovdje možete koristiti pseudo selektore.
CSS kod za Crooked Photo
#ex4 (
širina: 800px;
margina: 0 auto;
}
#ex4 img (
margina: 20px;
rub: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
okvir-sjena: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: svih 0,5s laganog izlaska;
-moz-prijelaz: svih 0,5s lakoća;
-o-prijelaz: svih 0,5s lakoća;
}
#ex4 img: lebdite (
-webkit-transform: rotiraj (-7deg);
-moz-transformacija: rotiraj(-7deg);
-o-transformacija: rotacija(-7deg);
}
05. Fade In and Reflect
Demo: Pogledati
Ovaj efekt je malo teže implementirati, pa smo morali malo petljati s njim da postignemo pristojan učinak. Zadana pozicija slike je blago prozirna. Zatim, kada prijeđete iznad slike, razina prozirnosti se snižava i slika se vraća u svoj izvorni izgled, zajedno s blagim sjajem i refleksijom (samo WebKit preglednici).
Nažalost, odraz nije baš prijelaz, pa se pojavljuje odmah iako se ostatak sadržaja pojavljuje usporeno.
Ako ste zbunjeni refleksijskim CSS-om, možete pročitati više o njemu u ovom članku (David Walsh).
Fade In i Reflect CSS kod
#ex5 (
širina: 700px;
margina: 0 auto;
min-visina: 300px;
}
#ex5 img (
margina: 25px;
neprozirnost: 0,8;
rub: 10px puni #eee;
/*Tranzicija*/
-webkit-transition: svih 0,5s jednostavnost;
-moz-prijelaz: svih 0,5s lakoća;
-o-prijelaz: svih 0,5s lakoća;
/*Odraz*/
-webkit-box-reflect: ispod 0px -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(prozirno), boja-stop(.7, prozirno), do(rgba(0,0,0,0.1)) );
}
#ex5 img: lebdite (
neprozirnost: 1;
/*Odraz*/
-webkit-box-reflect: ispod 0px -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(prozirno), boja-stop(.7, prozirno), do(rgba(0,0,0,0.4)) );
/*Sjaj*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
okvir-sjena: 0px 0px 20px rgba(255,255,255,0.8);
}
Zaključak
Ovih 5 primjera trebalo bi biti dovoljno da vas inspiriraju da napravite nešto svoje. Ne zaboravite da uvijek možete eksperimentirati s gotovim primjerima, a zatim nam ispričati o njima.
Ako ste negdje na netu naišli na druge atraktivne efekte, recite nama i drugim čitateljima o tome.
| 18.02.2016
CSS3 otvara neograničene mogućnosti dizajnerima korisničkog sučelja, a glavna prednost je što se gotovo svaka ideja može lako implementirati i oživjeti bez pribjegavanja korištenju JavaScripta.
Nevjerojatno je kako jednostavne stvari mogu oživjeti običnu web stranicu i učiniti je pristupačnijom korisnicima. Govorimo o CSS3 prijelazima, s kojima možete dopustiti elementu da se transformira i promijeni stil, na primjer, dok lebdite. Devet primjera CSS3 animacije dostupnih u nastavku pomoći će vam da stvorite osjećaj responzivnosti na svojoj web stranici, kao i poboljšati cjelokupni izgled stranice s prekrasnim, glatkim prijelazima.
Za detaljnije informacije možete preuzeti arhivu s datotekama.
Svi efekti rade pomoću svojstva prijelaza. tranzicija- “prijelaz”, “transformacija”) i pseudo-class:hover, koji određuje stil elementa kada kursor miša lebdi iznad njega (u našem vodiču). Za naše primjere koristili smo div od 500x309 px, početnu boju pozadine #6d6d6d i trajanje prijelaza od 0,3 sekunde.
Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; prijelaz: svih 0,3 s lakoća; )
1. Promijenite boju dok lebdite
Nekada je implementacija takvog efekta bila prilično mukotrpan posao, s matematičkim izračunima određenih RGB vrijednosti. Sada je dovoljno napisati CSS stil u kojem trebate dodati pseudo-class:hover selektoru i postaviti boju pozadine koja će glatko (u 0,3 sekunde) zamijeniti originalnu boju pozadine kada prijeđete pokazivačem iznad bloka:
Boja: lebdite (pozadina:#53ea93;)
2. Izgled okvira
Zanimljiva i upečatljiva transformacija je unutarnji okvir koji se glatko pojavljuje kada lebdite mišem. Pogodan za ukrašavanje raznih gumba. Da bismo postigli ovaj učinak, koristimo pseudo-class:hover i svojstvo box-shadow s parametrom inset (postavlja sjenu unutar elementa). Osim toga, morat ćete postaviti rastezanje sjene (u našem slučaju to je 23px) i njezinu boju:
Obrub: lebdjeti ( okvir-sjena: umetnuti 0 0 0 23px #53ea93; )
3. Zamah
Ova CSS animacija je iznimka jer se svojstvo prijelaza ovdje ne koristi. Umjesto toga koristili smo:
- @keyframes je osnovna direktiva za kreiranje frame-by-frame CSS animacije, koja vam omogućuje da radite tzv. scenarij i opišite animaciju kao popis ključnih točaka;
- animation i animation-iteration-count - svojstva za postavljanje parametara animacije (trajanje i brzina) i broja ciklusa (ponavljanja). U našem slučaju ponovite 1.
4. Prigušenje
Efekt blijeđenja je u biti jednostavna promjena prozirnosti elementa. Animacija se izrađuje u dvije faze: prvo je potrebno postaviti početno stanje prozirnosti na 1 - odnosno potpunu neprozirnost, a zatim odrediti njezinu vrijednost kada lebdite mišem - 0,6:
Fade (prozirnost: 1;) .fade:hover (prozirnost: 0,6;)
Za suprotan rezultat zamijenite vrijednosti:
5. Povećanje
Kako bismo povećali blok kada prijeđemo pokazivačem, koristit ćemo svojstvo transform i postaviti ga na scale(1.2). U ovom slučaju, blok će se povećati za 20 posto uz zadržavanje svojih proporcija:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Smanjenje
Smanjenje elementa jednako je jednostavno kao i povećanje. Ako smo u petoj točki za povećanje ljestvice trebali navesti vrijednost veću od 1, tada ćemo za smanjenje bloka jednostavno navesti vrijednost koja će biti manja od 1, na primjer, scale(0.7) . Sada, kada lebdite mišem, blok će se proporcionalno smanjiti za 30 posto svoje izvorne veličine:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformacija u krug
Jedna od često korištenih animacija je pravokutni element koji se pretvara u krug kada prijeđete iznad njega. Upotrebom svojstva CSS border-radius, koje se koristi zajedno s :hover i conversion, ovo se može postići bez problema:
Krug: lebdi ( radijus granice: 70%; )
8. Rotacija
Zabavna opcija animacije je rotiranje elementa za određeni broj stupnjeva. Da bismo to učinili, trebat će nam ponovno svojstvo transformacije, ali s drugom vrijednošću - rotateZ(20deg) . S ovim parametrima, blok će se zakrenuti za 20 stupnjeva u smjeru kazaljke na satu u odnosu na Z os:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D sjena
Mišljenja dizajnera razlikuju se oko toga je li ovaj efekt prikladan u ravnom dizajnu. Međutim, ova CSS3 animacija je prilično originalna i također se koristi na web stranicama. Postići ćemo trodimenzionalni efekt korištenjem već poznatih svojstava box-shadow (stvorit ćemo višeslojnu sjenu) i transformirati s parametrom translateX(-7px) (osigurat ćemo horizontalni pomak bloka ulijevo za 7 piksela ):
Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transformacija: translateX(-7px); )
Podrška za preglednik
Sljedeći preglednici trenutno podržavaju svojstvo prijelaza:
| Preglednici stolnih računala | |
|---|---|
| Internet Explorer | Podržava IE 10 i noviji |
| Krom | Podržano od verzije 26 (sve dok verzija 25 ne radi s prefiksom -webkit-) |
| Firefox | Podržano od verzije 16 (u verzijama 4-15 radi s prefiksom -moz-) |
| Opera | Podržano od verzije 12.1 |
| Safari | Podržano od verzije 6.1 (u verzijama 3.1-6 radi s prefiksom -webkit-) |
Preostala svojstva korištena u ovim primjerima, kao što su transform, box-shadow, itd., također podržavaju gotovo svi moderni preglednici. Međutim, ako namjeravate koristiti ove ideje za svoje projekte, toplo preporučujemo da još jednom provjerite kompatibilnost s više preglednika.
Nadamo se da su vam ovi primjeri CSS3 animacije bili od pomoći. Želimo vam kreativni uspjeh!
