Css efekte të lezetshme. Efektet origjinale të pezullimit për imazhet në CSS3 të pastër

Fillimisht, për ata që nuk janë plotësisht në këtë temë ose nuk janë fare në këtë temë, unë do të shpjegoj shkurtimisht se çfarë është hover-. Këto janë lloje të ndryshme efektesh (shfaqje kërcyese, këshilla veglash, tranzicion të qetë, transformim, rrotullim, zmadhimi, zhvendosje, etj.) të aplikuara në elementët e një faqe interneti me kursorin e miut mbi to. Këto mund të zbatohen si me ndihmën e shtojcave të ndryshme jQuery, ashtu edhe në një të pastër.
Sot kam përgatitur një koleksion të madh të efekteve origjinale hover për imazhet e krijuara duke përdorur CSS3, pa lidhur bibliotekat javascript. Unë nuk do të flas për avantazhet dhe disavantazhet e zbatimit të efekteve hover në CSS3 të pastër, kjo është një temë tjetër, thjesht shikoni shembujt dhe, nëse është e nevojshme, përdorni atë që ju pëlqen në faqen tuaj. Të gjitha efektet e paraqitura në rishikim janë të pajisura me një shembull demo dhe dokumentacion të detajuar me burime. Manualet janë kryesisht në gjuhën borgjeze, por gjithçka është pak a shumë intuitive.

Thjesht dua të tërheq vëmendjen tuaj për faktin se të gjithë këta shembuj do të funksionojnë si duhet vetëm në shfletuesit modernë që mbështesin vetitë CSS3.

Për të mos prishur pamjen e përgjithshme, ai nuk i shtrembëroi emrat e efekteve me përkthim makinerik (me përjashtim të disave), ai la origjinalet e titujve siç i quajti zhvilluesi.

Një efekt shumë interesant hover për imazhet e vogla, duke përdorur vija të holla në dizajn dhe tipografi. Disa lloje të ndryshme efektesh për shfaqjen e titrave për fotografi, transformime të buta dhe jo ndërhyrëse 3D dhe tranzicione të buta të pseudo-elementeve. Punon vetëm në shfletuesit modernë.

iHover është një koleksion mbresëlënës i efekteve të pastra CSS3 hover, me mbështetje Bootstrap 3. Ndërtuar me Scss CSS (skedar), lehtësisht i modifikueshëm me variabla. Kodi është modular, nuk ka nevojë të përfshijë të gjithë skedarin. Mbi 30 efekte të ndryshme në një paketë. Gjithçka është mjaft mirë e dokumentuar dhe efektet janë shumë të lehta për t'u përdorur. E tëra çfarë ju duhet të bëni është të rreshtoni saktë shënimin HTML dhe të vendosni skedarin CSS në punë.

Krijon disa efekte të thjeshta, por me stil qëndrimi për titrat e imazheve. Ideja është që titulli, emri i autorit dhe butoni i lidhjes të shfaqen në mënyrë dramatike kur rri pezull mbi miniaturat. Për disa efekte, përdoren transformime vizuale 3D.

Një efekt tranzicioni shumë i thjeshtë, pa asnjë zile dhe bilbil të veçantë, një imazh tërësisht i rrumbullakët në një kornizë, transformohet duke ndryshuar fokusin në hover dhe kaq.

për fotografitë e CSS3

Zhvilluesi e pozicionon punën e tij si një shembull të një galerie imazhesh me efekte tranzicioni kur shfaqen shënime (titrat) për miniaturë. Është deklaruar mbështetje e fortë për shfletuesit modernë, përfshirë IE 9+. Sigurisht, është e vështirë ta quash një galeri të plotë, por efekti i shfaqjes së nënshkrimeve është mjaft interesant.

Një grup tjetër rregullash CSS për krijimin e efekteve mbresëlënëse të transformimit kur rri pezull mbi miniaturë absolutisht rrethore. Paketa përmban 7 lloje të tranzicioneve CSS3, dokumentacion shumë të detajuar për konfigurimin dhe përdorimin. Efektet mbështeten nga të gjithë shfletuesit modernë.

Miniaturat rrotulluese kur rri pezull

Efekti i thjeshtë i rrotullimit të miniaturave të rrumbullakëta kur rri pezull mbi to me kursorin e miut është pothuajse i njëjtë që mund të shihni në blogun tim, në njoftimet e postimeve në faqen kryesore. Ai zbatohet në disa rreshta të kodit css.

Nëse përkthehet fjalë për fjalë: "Efekt seksual kur rri pezull". Sigurisht, vështirë se do të vini re diçka kaq seksi në këtë efekt, përveç nëse keni një imagjinatë të dhunshme, por efekti është interesant në mënyrën e vet dhe ia vlen t'i kushtoni vëmendje.

Pesë efekte të ndryshme fluturimi për imazhe. Titrat pop-up në tre variacione, perde në formën e ndryshimit të shkallës së transparencës dhe rrotullimit me lëvizje horizontale.

4 Llojet e efekteve të animacionit për titrat e imazheve, të zbatuara ekskluzivisht duke përdorur CSS3. Pozicione të ndryshme fade dhe efekte tranzicioni, performancë mjaft standarde. Për të kuptuar se si funksionon animacioni, hidhini një sy kodit burimor të faqes demo, nuk gjeta ndonjë dokumentacion të veçantë.

Miniaturat e rreshtuara në galeri me paraqitje të ndryshme të titrave, rrotullime, zbehje, pop dhe më shumë. Dokumentacioni për përdorimin dhe konfigurimin është mjaft i pakët, por nëse vërtet dëshironi, mund ta kuptoni.

Ky efekt nuk përfaqëson asgjë të veçantë, një ndryshim banal në ndriçimin e imazheve në lëvizje, përveçse shtohen elementë të animacionit. Ju do të duhet të kuptoni vetë detajet e zbatimit duke zgjeruar kodin burimor të demonstrimit.

Një grup tjetër prej 10 efektesh pezullimi për imazhe, modifikime të ndryshme të miniaturave në lëvizje, zmadhimi, rrotullim, rrotullim, zbehje, etj.

Efekte të ndryshme për animimin e kornizës rreth imazheve, duket mjaft tërheqëse, ka një udhëzues të detajuar se si të vendosni dhe përdorni.

Efektet origjinale të pezullimit CSS3 të aplikuara për të shfaqur në mënyrë efektive titrat e miniaturave në lëvizje. Seti i rregullave CSS përfshin 10 efekte të ndryshme që mund t'i përdorni veçmas për imazhe të ndryshme. Efektet janë vërtet mbresëlënëse, veçanërisht kur kupton se gjithçka është bërë me CSS3. Një udhëzues i detajuar do t'ju ndihmojë të kuptoni se çfarë është.

Ideja është të krijohet një SVG që është një formë sfondi për një lloj shkronjash dhe kthehet në një formë tjetër në lëvizjen e mausit. Kështu, ju mund të bëni shumë opsione të ndryshme, në shembull, tregohen tre lloje të efekteve të tranzicionit. Gjëja e bukur për përdorimin e SVG është se ne mund të ndryshojmë madhësinë e formularit për t'iu përshtatur kontejnerit prind.

Imazhe rrëshqitëse

Thelbi i këtij efekti është që imazhi të zhvendoset lart e poshtë për shfaqjen e nënshkrimit. Nëse punoni me parametrat e stilit, mendoj se mund të arrini efekte mjaft të këndshme, por si parazgjedhje, gjithçka duket shumë e thjeshtë.

Me këtë efekt, gjithçka është e thjeshtë, titrat për fotografitë rrëshqasin lart djathtas ose majtas poshtë, në formën e një fjongo me një sfond të errët të tejdukshëm, gjithçka është shumë e thjeshtë për t'u riformuar duke përdorur vetitë css.

Një zgjidhje interesante, miniaturat paraqiten në një formë të errët, kur kaloni pezull mbi to, shfaqen imazhet dhe nënshkrimi shfaqet në një sfond të lehtë.

Një titull imazhi del nga këndi dhe zgjerohet diagonalisht në të gjithë zonën e imazhit.

Disa zgjidhje më interesante për zbatimin e titrave pop-up për miniaturat e imazheve. Në redaktorin në internet, mund të eksperimentoni me parametrat dhe të arrini rezultate më mbresëlënëse.

Një grup efektesh të bukura kur rri pezull mbi miniaturat, lloje të ndryshme të pamjes dhe dizajnit të titrave për fotografitë. Vijat e holla në kontrast me një sfond pak të errësuar krijojnë blloqe informacioni të lexueshëm.

Forma të çuditshme dhe efekt zmadhimi të kombinuara me efektin e animacionit të titrave për fotografimin e imazheve.

Efektet e mrekullueshme të mbivendosjes së ikonave në miniaturat e imazheve në variacione të ndryshme të pamjes. Shembulli përdor simbolin (+) të përshkruar në një rreth duke përdorur rreze-kufitare: në CSS, mund të përdorni gjithashtu ikonat e shkronjave për ta bërë panelin pop-up më informativ.

Një shembull i krijimit të një efekti vizual rrëshqitës për nxjerrjen e titrave vëllimore në imazhe duke përdorur vetëm CSS3 dhe HTML5.

6 Titrat e imazheve

6 Opsione për shfaqjen e titrave pop-up për imazhet në lëvizje duke përdorur CSS3. Mësimi i detajuar mbi zbatimin dhe konfigurimin, burimet e disponueshme për shkarkim.

Dhe së fundi, në fund, si të thuash, nuk mund të mos përmend mënyrën më të thjeshtë për të krijuar një titull pop-up për një miniaturë duke përdorur CSS3.

Unë fola për këtë metodë në një nga mësimet e mia të mëparshme:.

Me gjithë respekt, Andrew

Shumë shpesh në sajte mund të hasni një ndryshim ose butona në lëvizje. Një pseudo-klasë e veçantë: hover në CSS ju lejon të zbatoni detyrën. Sot do të shqyrtojmë disa teknika për të bërë këtë truk, dhe më poshtë do të publikojmë një listë me më interesantet prej tyre (me përshkrime / shpjegime të shkurtra). Ne i ndajmë të gjitha opsionet në:

Këto grupe janë shumë arbitrare, pasi shumë shembuj mbivendosen dhe janë universalë, pra mund të hasen në projektimin e objekteve të ndryshme.

Efekti hover në stilet CSS shtohet në të djathtë të elementit si më poshtë:

a: rri pezull (ngjyra: e kuqe;)

Më shpesh, mekanizmi përdoret posaçërisht për lidhjet për të ndryshuar ngjyrën e tyre ose për të shtuar / hequr nënvizimin. Megjithatë, ai mund të caktohet në blloqe të tjera, butona, tekste ose të përdoret gjatë krijimit.

butoni: rri pezull (sfondi: rgba (0,0,0,0); ngjyra: e kuqe;) .figura ime: rri pezull (opaciteti: 0,5; filtri: alfa (errësirë ​​= 50);)

Shfletuesit modernë perceptojnë po aq saktë efektin e pezullimit CSS në hover, megjithëse në versionet më të vjetra të IE 6 dhe më poshtë ai funksionon ekskluzivisht për lidhjet. Plus, disa burime thanë se kjo duhet të tregohet në kod.

Nga rruga, kur vendosni stilet e lidhjeve, përzgjedhësit e mëposhtëm mund të përdoren gjithashtu shtesë: lidhje - për faqet që nuk janë vizituar ende,: vizituar - ato ku keni qenë tashmë +: aktive përcakton adresën aktuale aktive. Është e rëndësishme të vendosni efektin hover në CSS pas: link dhe: vizituar, nëse ekzistojnë.

Le të kalojmë nga teoria në praktikë. Më poshtë është një listë e materialeve dhe fragmenteve të dobishme - ndiqni lidhjet për të parë burimet.

Zhvendos butonin dhe efektet e lidhjes

Siç thamë më lart, kjo është kategoria më e popullarizuar e objekteve në faqen ku ndodh kjo teknikë. Këtu janë disa opsione për këtë temë.

Shembuj të thjeshtë për butonat

Butonat Sullivan

Truku është se kur kaloni pezull mbi butona të ndryshëm, përveç ndryshimit të ngjyrës së sfondit, lëshohet edhe një animacion i vogël me ikona (dhe secili ka të vetin).

Ikonat CSS në Hover

Një përzgjedhje prej 5 opsionesh të thjeshta për zbatimin e detyrës. Në të gjitha rastet, përdoren ikona shtesë që shfaqen në të djathtë / majtas të tekstit ose e zëvendësojnë atë.

Efektet e pezullimit të butonave

Krahasuar me shembullin e mëparshëm, këto 12 funksione të aktivizimit duken shumë më interesante, si vizualisht ashtu edhe për sa i përket kodit. Jo pa JS.

Navi rri pezull

Disa ndryshime që e bëjnë atë më të pazakontë se vetia bazë e dekorimit të tekstit. Sfondi i butonit është gjithashtu i mbushur me efekte të ndryshme vizuale.

Informacion mbi pezullimin

Funksionaliteti i këshillës së veglave tani mbështetet në të gjithë shfletuesit, por ju mund ta personalizoni sipas nevojave tuaja. Në shembullin aktual, pseudo-klasa aktivizohet për etiketën dfn, duket elegant. Kodi është mjaft kompakt HTML + CSS.

Butoni Mana

Një nga opsionet më origjinale të efektit të pezullimit në blloqe është se kur rri pezull, është si ta mbushësh atë me lëng. Zbatimi përdor CSS, HTML dhe SVG. Ky fragment do të jetë padyshim një dhuratë nga perëndia në një temë të caktuar të sajteve.

Efektet pezull për imazhet

15 truke themelore

Përkundër faktit se artikulli u botua shumë kohë më parë, metodat ende funksionojnë si duhet. Këtu, me siguri, janë mbledhur të gjitha transformimet tipike të mundshme për grafikë: disa lloje zmadhimi, rrotullime, turbullime, b/w, transparencë, filtra, shkëlqim, etj. Material shumë i dobishëm.

Efekte të bukura të imazhit të pezullimit

Një përzgjedhje prej 30 veprimesh të këndshme dhe të qetë kur rri pezull mbi një foto. Për shkak të manipulimeve të thjeshta vizuale në formën e zmadhimit, duke shtuar linja, krijohet një përshtypje e mirë komplekse. Në disa vende titulli rritet dhe përshkrimi i shkurtër "tërheq". Një opsion i shkëlqyeshëm për një portofol.

Animacion barberpole hover

Në pamje të parë, animacioni nuk është i komplikuar, i cili në fund të fundit duket shumë i lezetshëm dhe jo standard.

Efektet e fluturimit CSS me zbulimin e drejtimit

Për një përzgjedhje të madhe të fragmenteve dhe kodeve të lidhura, shikoni këtë artikull nga css-tricks.com. Të gjithë këta shembuj bashkohen nga fakti se në procesin e punës, përcaktohet vendndodhja dhe drejtimi i lëvizjes së kursorit. Kjo, nga ana tjetër, ju lejon të krijoni reagime mjaft origjinale kur rri pezull mbi elementët e faqes:

Në shumë zgjidhje të sofistikuara, Javascript dhe jQuery për efektet hover mund të diversifikojnë dhe përmirësojnë shumë rezultatin.

Drejtimi i vetëdijshëm Hover Mirësia

Pllakat e vetëdijshme për drejtimin duke përdorur CSS të pastër në shtegun e klipit

Shikoni për pjesën tjetër të patate të skuqura në artikullin origjinal.

Animatizmi

Në këtë zhvillim ka mbi 100 mënyra të thjeshta për të "animuar" imazhet ose objektet në lëvizje. Me ndihmën e këtyre funksioneve mund të implementoni pamje të ndryshme të butonave, titujve, teksteve, ikonave sociale, etj. Ekzistojnë opsione me ndryshimin e shfaqjes së fotografive, mbivendosjet e një sfondi të tejdukshëm.

Lidhja përmban 7 efekte të titullit të pezullimit CSS3 - kur, kur qëndron pezull mbi një imazh, përdoruesi do të shohë një bllok informacioni me një titull, një përshkrim të shkurtër dhe një lidhje për të shkuar. Kjo nuk do të thotë se shembujt janë shumë origjinalë, por ato patjetër do të ndihmojnë në diversifikimin e një projekti me përmbajtje statike.

CSS Hover Bibliotekat

Hover.css

Projekti me emrin e thjeshtë Hover.css përmban një koleksion efektesh CSS3 për lidhje, butona, blloqe, etj. Ju mund të përdorni kodin e gatshëm dhe / ose të shtoni modifikimet tuaja në të. Këtu ka shumë gjëra interesante: transformime 2D / 3D, punë me sfonde dhe korniza, hije, ikona. Zgjidhja është e disponueshme në formatet CSS, LESS dhe Sass.

Imagehover.css

Një bibliotekë tjetër që vendos efekte hover për fotografi - në versionin falas do të gjeni 44 opsione konvertimi (seti premium përmban 5 herë më shumë prej tyre). LESS dhe SCSS gjithashtu mbështeten këtu, ky rast peshon vetëm 19 kb. Sajti ka një faqe me një demonstrim të të gjithë shembujve të punës. Ka shumë veçori unike të ofruara që nuk janë parë më lart.

Projekti ka më shumë se 30 teknika të ndryshme për objekte në formë të rrumbullakët dhe katrore. Të gjithë ata janë mjaft origjinalë, praktikisht nuk ka veprime të thjeshta "me një element" në formën e një zmadhimi / fluturimi të zakonshëm. Detyra e pastër CSS3 + HTML e zbatuar (plus skedarët Scss të përfshira). Përputhshmëri e shkëlqyer me Bootstrap 3, ka dokumentacion.

Total. Shpresojmë që këto efekte css hover kur qëndroni pezull mbi imazhe, blloqe, lidhje dhe elementë të tjerë të faqes t'ju kenë ndihmuar të kuptoni këtë temë. Ju mund të zbatoni zgjidhjet më të suksesshme, sipas mendimit tuaj, në faqet tuaja - pavarësisht nëse lidhni një bibliotekë të plotë ose thjesht integroni një version të vogël të kodit.

Nëse dini ndonjë veçori dhe fragmente më interesante, dërgoni URL-të tek ata në komente. Dhe ne do ta plotësojmë artikullin në të ardhmen.