Hvordan lage en sveveeffekt i ren CSS som er knyttet til markørens retning. Originale hover-effekter for bilder ved bruk av ren CSS3

Svært ofte på nettsteder kan du komme over endringer eller knapper når du holder musepekeren. En spesiell pseudo-class:hover i CSS lar deg implementere oppgaven. I dag skal vi se på noen teknikker som lar oss lage dette trikset, og nedenfor vil vi publisere en liste over de mest interessante av dem (med korte beskrivelser/forklaringer). Vi deler alle alternativene inn i:

Disse gruppene er veldig vilkårlige, fordi mange eksempler overlapper hverandre og er universelle, det vil si at de kan finnes når man designer ulike objekter.

Hover-effekten i CSS-stiler legges til til høyre for elementet som følger:

a: sveve (farge: rød;)

a:hover ( farge: rød; )

Oftest brukes mekanismen spesifikt for lenker for å endre farge eller legge til/fjerne understreking. Den kan imidlertid også spesifiseres for andre blokker, knapper, tekster eller brukes ved oppretting.

knapp : hover ( bakgrunn : rgba (0 , 0 , 0 , 0 ) ; farge : rød ; .mitt-bilde : hover ( opasitet : 0,5 ; filter : alpha(opacity= 50 ) ; )

button:hover ( bakgrunn: rgba(0,0,0,0); farge: rød; ) .my-picture:hover ( opasitet: 0,5; filter: alpha(opacity=50); )

Moderne nettlesere oppfatter like riktig CSS-hovereffekten ved sveving, selv om den i eldre versjoner av IE 6 og eldre bare fungerer for lenker. I tillegg sa noen kilder at dette må spesifiseres i koden.

Forresten, når du angir lenkestiler, kan velgere også brukes i tillegg: lenke - for sider som ennå ikke er besøkt, :besøkt - for de der du allerede har vært + :aktiv bestemmer den aktive adressen. Det er viktig å plassere hover-effekten i CSS etter :link og :visited hvis de finnes.

La oss gå fra teori til praksis. Nedenfor er en liste nyttige materialer og utdrag – følg lenkene for å se kildene.

Hover-effekter for knapper og lenker

Som vi sa ovenfor, er dette den mest populære kategorien objekter på nettstedet der denne teknikken er funnet. Her er noen alternativer om emnet.

Enkle eksempler for knapper

Sullivan-knapper

Trikset er at når du holder musepekeren over forskjellige knapper, i tillegg til å endre bakgrunnsfargen, starter den også liten animasjon med ikoner (hver med sin egen).

CSS-ikoner på hover

Utvalg av 5 enkle alternativer gjennomføring av oppgaven. I alle tilfeller brukes tilleggsikoner som vises til høyre/venstre for teksten eller erstatter den.

Knappsveveeffekter

Sammenlignet med forrige eksempel ser disse 12 utløserfunksjonene mye mer interessante ut: både visuelt og når det gjelder kode. Ikke uten JS.

Nav svever

Flere funksjoner som lar deg gjøre noe mer uvanlig enn med den grunnleggende tekstdekorasjonsegenskapen. Knappebakgrunnen er i tillegg fylt med forskjellige visuelle effekter.

Info om Hover

Verktøytips-funksjonalitet støttes for øyeblikket i alle nettlesere, men du kan tilpasse den for å passe dine behov. I det gjeldende eksemplet utløses pseudoklassen for dfn-taggen, som ser stilig ut. Koden er ganske kompakt HTML + CSS.

Mana-knapp

En av de mest originale alternativer sveveeffekt i blokker - når du svever er det som å fylle den med væske. Implementeringen bruker CSS, HTML og SVG. For visse nettstedsemner vil denne kodebiten definitivt være en gave.

Hover-effekter for bilder

15 grunnleggende teknikker

Til tross for at artikkelen ble publisert for ganske lenge siden, fungerer metodene fortsatt korrekt. Her er sannsynligvis alle mulige standardtransformasjoner for grafikk samlet: flere typer zoom, rotasjon, uskarphet, s/h, transparens, filtre, glans osv. Veldig nyttig materiale.

Vakre bilder med sveveeffekter

Et utvalg av 30 hyggelige og jevne handlinger når du holder musepekeren over et bilde. På grunn av enkle visuelle manipulasjoner i form av zoom og å legge til linjer, skapes et godt komplekst inntrykk. Noen steder er tittelen forstørret og den korte beskrivelsen strammet inn. Flott alternativ for en portefølje.

Barberpole Hover Animasjon

Animasjonen er ikke komplisert ved første øyekast, men til slutt ser den veldig kul og uvanlig ut.

CSS sveveeffekter med retningsdeteksjon

Et utmerket utvalg av utdrag og koder om emnet finner du i artikkelen fra css-tricks.com. Alle disse eksemplene er forent av det faktum at under drift bestemmes plasseringen og retningen for markørbevegelsen. Dette lar deg i sin tur lage ganske originale reaksjoner når du holder musepekeren over sideelementer:

I mange vanskelige avgjørelser Javascript og jQuery for hover-effekter lar deg diversifisere og forbedre resultatet betydelig.

Direction Aware Hover Goodness

Direction Aware Tiles ved hjelp av klippbane Pure CSS

Finn resten av triksene i den originale artikkelen.

Animatisme

Denne utviklingen omfatter mer enn 100 enkle måter"animasjon" av bilder eller objekter når du holder musepekeren. Ved å bruke disse funksjonene kan du implementere forskjellige utseende på knapper, overskrifter, tekster, sosiale ikoner og så videre. Det finnes alternativer med å endre visningen av bilder og gjennomskinnelige bakgrunnsoverlegg.

Linken inneholder 7 CSS3 hover header-effekter - når brukeren, når du holder pekeren over et bilde, vil se en informasjonsblokk med en tittel, Kort beskrivelse og en lenke å følge. Dette er ikke å si at eksemplene er veldig originale, men de vil definitivt bidra til å diversifisere et statisk innholdsprosjekt.

CSS Hover-biblioteker

Hover.css

Prosjektet, ganske enkelt kalt Hover.css, inneholder en samling CSS3-effekter for lenker, knapper, blokker osv. Du kan bruke klar kode og/eller legg til dine egne endringer i den. Det er mye interessant her: 2D/3D-transformasjoner, arbeid med bakgrunner og rammer, skygger, ikoner. Løsningen er tilgjengelig i CSS-, LESS- og Sass-formater.

Imagehover.css

Nok et bibliotek som setter sveveeffekter for bilder - inn gratis versjon du finner 44 transformasjonsalternativer (premiumsettet inneholder 5 ganger mer). LESS og SCSS støttes også her, denne filen veier kun 19kb. Nettstedet har en side som viser alle fungerende eksempler. Det er mye som tilbys unike sjetonger, som ikke er nevnt ovenfor.

Prosjektet omfatter mer enn 30 forskjellige teknikker for runde og firkantede gjenstander. Alle er ganske originale; det er praktisk talt ingen enkle "single-element" handlinger i form av en vanlig zoom/fly ut. Oppgaven for ren CSS 3 + HTML (pluss Scss-filer inkludert). Utmerket kompatibilitet med Bootstrap 3, dokumentasjon tilgjengelig.

Total. Vi håper disse css hover-effektene når du holder markøren over bilder, blokker, lenker og andre sideelementer hjalp deg med å forstå dette emnet. Du kan implementere de mest vellykkede løsningene, etter din mening, på nettstedene dine - det være seg å koble til et fullverdig bibliotek eller ganske enkelt integrere en liten versjon av koden.

Hvis du vet noe mer interessante funksjoner og utdrag, send URL-er til dem i kommentarfeltet. Og vi vil legge til artikkelen i fremtiden.

Ideen om å skille presentasjonen av informasjon fra koden som skaper og behandler den ble radikalt ny. Det var sterk løsning på en gang, men dette punktet ble ikke fullt ut anerkjent da. Når programmering skilt fra den enkelte datamaskin, men ble ikke en vinner i lokalt nettverk eller en enkelt domenesone, og umiddelbart spredt overalt, først da ble det åpenbart at presentasjon av informasjon (i form av design) og arbeid med den (i form av kode) er to sider på samme plan.

Tre fasetter av nettstedutvikling

Fra et formelt synspunkt er det tre hovedkomponenter (i forskjellige syntaktiske former) som utgjør et nettsted: PHP-kode, JavaScript-kode og beskrivelser CSS-stiler. Det spiller ingen rolle i det hele tatt hva navnet eller versjonen av denne eller den komponenten brukes, hva HTML-versjon markup brukt og hvilken versjon av nettleseren som er installert. Kompatibilitet er ikke høyt aktet i disse dager, fordi til enhver tid er relevant: hva som er kodet og hva av det som er kodet kan vises og utføres.

Hvis tidligere tunger kjempet om ideer, foretrekker standardprodusenter innen internettteknologi og nettlesere i dag å kjempe forgjeves.

Personlig og offentlig

Det er mange måter Internett er tilgjengelig på (datamaskiner, bærbare datamaskiner, nettbrett, smarttelefoner), og det er også mange nettlesere. Det er ingen garanti for at en enkelt enhet vil vise nettstedet i den formen utvikleren opprettet det i. Innsatsen til sistnevnte oppnår ikke alltid målet og gir webdesign et enkelt mangfold, det vil si enhet av visning av essensen, uansett hvor den avsløres for besøkende.

Ved å skille det personlige og det offentlige, kun bruke det som fungerer i sistnevnte, kan du oppnå merkbar suksess i design. Skjønnhet, kunstnerisk øyeblikk og webdesign er skjebnen til relevante spesialister og talenter. CSS er kode, om enn en veldig unik en. Hans bekymring er å beskrive stiler (alternativer for å vise informasjon). Med advent mobile enheter CSS var lastet med ekte koding i form av mediespørringer. Så muligheten for et nytt ekteskap mellom design og kode er ikke så urealistisk som det kunne virket for bare et par år siden.

Når utvikleren utvikler CSS-stiler, stoler utvikleren på sin personlige beviste erfaring og de CSS-designene som fungerer på de fleste nettlesere og tilfredsstiller flertallet av besøkende. Du bør bruke den første så mye som mulig og den andre så lite som mulig, da er det mye større sjanse for å få et resultat som fungerer nesten alltid og overalt.

Første regel: håp på standarden, men ikke gjør en feil selv

CSS:hover er når musen "skriver inn" et sideelement. Når musen klikker på et element, blir det aktivt, men når markøren beveger seg til siden, kan det igjen endre seg og vise seg i aktiv tilstand. ":hover", "aktiv" og "besøkt" er de mest populære pseudoklassene når man beskriver stiler.

Det er veldig praktisk i nettstedskoden å ikke bekymre deg for små ting som å flytte musen over elementer. Ved å gi to beskrivelser i stilbeskrivelsestabellen:

bakgrunnsfarge: grønn;

Vi får det når du holder musen over elementet automatisk endring fargelegge teksten fra svart til hvit og endre bakgrunnen til dette elementet til grønn. Pseudo-klasser kan brukes på alle elementer og oppnå en rekke visuelle effekter.

Andre regel: når du stoler på standarder, fokuser på koden din

Alt ville vært bra hvis fremgangen holdt seg på nivå med datamaskiner og bærbare datamaskiner utstyrt med mus, og fremgang inn mobilkommunikasjon førte ikke til fremveksten av smarttelefoner, nettbrett og andre mobile enheter, som det er veldig problematisk å koble til en slik enhet.

På den annen side, kun på dingser utstyrt med en spesiell berøringsskjerm blir det mulig å manipulere fingrene direkte på touch-skjerm, som allerede har blitt vanlig på smarttelefoner, nettbrett og lignende enheter.

Spise signifikant forskjell and:hover fungerer ikke her i det hele tatt slik vi ønsker. Du kan ikke gjøre dette uten kode, og bruk av mediespørringer løser ikke alle problemene.

Kompatibilitet er for dyrt i dag informasjonsverden, derfor for å sikre riktig funksjonalitet til nettstedet innenfor fastsatte krav til webdesign og implementering av funksjonalitet, er det å foretrekke å fokusere på minimum nødvendige brukstilfeller: CSS hover, CSS hover fokus, CSS hover aktiv (besøkt). Jo mer kode (både i nettleseren og på serveren) kontrollerer webdesign, jo bedre. Et program er kontroll, det er bedre når denne kontrollen ikke er overgitt til gjeldende standarder, som du ofte ikke vet hva du kan forvente.

Knapper og andre sideelementer

Button hover CSS er en fantastisk løsning, men stort sett er hvert sideelement en "knapp". Siden må for det første være levende, og dersom dette ikke er inkludert i koden, hvis oppgaven er å lage en side som utvikler seg tilstrekkelig til applikasjonsområdet og opptrer under hensyntagen til atferden til den besøkende, så skal minst ved å bruke CSS-stiler kan du legge til livlighet til sideelementene.

Det er praktisk å bruke sveveeffekter. Med deres hjelp kan du enkelt legge liv til sider, men koden vet ikke hva musen gjør på skjermen hvis den ikke har muligheten til å spore bevegelsen. Fra dette synspunktet, det vil si når koden styrer bevegelsen til musen (= fingerbevegelse på en smarttelefon), kan den uavhengig fremheve elementet eller transformere det. Dette har ingenting å gjøre med pseudo-klasser, men gir full kodekontroll over utseendet til siden, slik at den kan vises tilstrekkelig på ulike enheter i ulike nettlesere.

Fallgruver i stilark

Det er umulig å si at standardene innen feltet for å beskrive CSS-stiler ikke vet hva de gjør, men det er også umulig å si at de samhandler fullt ut med andre standarder innen internettprogrammering.

Stiler og pseudoklasser kan beskrives på sidekodingsstadiet, i øyeblikket når serveren genererer siden og i dynamikk: allerede i nettleseren kan du enkelt lage en ny stil og endre den eksisterende.

Ved å bruke AJAX, når det ikke er behov for å regenerere siden for å vise en reaksjon på en besøkendes handling, men i stedet for å endre elementet eller flere elementer gir det litt "krydder". Kodenes "vennskap" - det som allerede er i nettleseren (JavaScript) og det som er på serveren (PHP) - er nettstedets forfatter (programmerer).

Ikke bare visningen av elementene på siden, men også deres videre oppfatning av koden avhenger betydelig av hvordan algoritmen for denne interaksjonen utføres. Enkelt sagt, pseudo-klasser (spesielt) er veldig bra for statiske forhold, omtrent som for en seilbåt i et klart hav med bris– alt er åpenbart, tilgjengelig og håndterbart. Hvis været endrer seg, eller vinden tiltar, eller en besøkende forårsaker en nødsituasjon, kan du raskt treffe revet og miste den besøkende.

Standard og dens emulering

Hover kan emuleres via JavaScript ved å bruke hendelsene onmouseover og onmouseout. Ofte er det her det hele slutter. Fra sunn fornufts ståsted, når det gjelder å lage et virkelig fungerende nettsted, er det bedre å holde kontrollen i egne hender enn å gi den opp til mytiske standarder som endrer seg utover utviklerens vilje og ønske.

Noen ganger kan du lese noe som " denne sjansen er tilgjengelig selv i IE," men oftere kan du lese om hvilke stilbeskrivelser som oppfattes av en bestemt nettleser. Mye sjeldnere kan du lære om hvordan JavaScript er forskjellig i enkelte nettlesere.

Vurdere den akkumulerte erfaringen, beundre egenskapene til Chrome og Opera, kritisere tregheten og tregheten til nettleseren fra produsenten (den uforglemmelige IE-programmereren fra Microsoft, som er kjær til hjertet av enhver programmerer: "Gode gamle Internet Explorer Bare de late skjelte ikke ut. Eller noen som bare vet hvordan man spiller Klondike på en datamaskin.- sitat fra en ukjent internettforfatter), bør du holde deg til den gylne middelvei: bruk det som fungerer overalt og alltid.

Folk trenger penger til arbeid; når de trenger å bli spennende, går de vanligvis til registerkontoret eller teateret, men ikke til Internett.

Emulering og kontroll

Tidligere, når programmeringen kom på beina, var det vanlig å lytte til de eldste og skrive riktig. I dag er det for mange eldste, alt forandrer seg for raskt, og hvis du lytter til alle, vil det ikke være nok tid selv til veldig enkelt arbeid, til et minimalt funksjonelt nettsted.

Programmering er for det første kontroll, og i tilfeller der standarden setter reglene partisk, eller man kan forvente en kraftig endring i regelen, eliminering av den og fremveksten av en ny, den beste løsningen Det var alltid ikke å ta noen avgjørelser, men å implementere den nødvendige funksjonaliteten til nettstedet med minst mulig, men faktisk fungerende kode.

Først av alt, for de som ennå ikke er helt inne i faget eller ikke er i det hele tatt, vil jeg kort forklare hva sveveeffekter er. Dette forskjellige typer effekter (popup-tekster, verktøytips, myke overganger, transformasjon, rotasjon, forstørrelse, forskyvning, etc., etc.) brukt på nettstedselementer når du holder musen over dem. Disse effektene kan realiseres ved hjelp av ulike jQuery-plugins, og i ren CSS3.
I dag har jeg utarbeidet et stort utvalg originale hover-effekter for bilder laget ved hjelp av CSS3, uten å koble til javascript-biblioteker. Jeg vil ikke snakke om fordelene og ulempene ved å implementere hover-effekter i ren CSS3, det er et annet emne, bare se på eksemplene og om nødvendig bruk den du liker på nettstedet ditt. Alle effekter presentert i anmeldelsen er utstyrt med et demoeksempel og detaljert dokumentasjon med kildekoder. Manualene er stort sett på borgerlig språk, men alt er mer eller mindre intuitivt.

Jeg vil umiddelbart trekke oppmerksomheten din til det faktum at alle disse eksemplene vil fungere riktig bare i moderne nettlesere som støtter CSS3-egenskaper.

For ikke å ødelegge helhetsbildet, forvrengte jeg ikke navnene på effekter med maskinoversettelse (med unntak av noen), jeg forlot originaltitlene som utvikleren kalte dem.

En veldig interessant effekt når du holder musepekeren over miniatyrbilder, bruker fine linjer i design og typografi. Flere forskjellige typer effekter for utseendet til bildetekster, myke og ikke-påtrengende 3D-transformasjoner og jevne overganger av pseudo-elementer. Fungerer bare i moderne nettlesere.

iHover er en imponerende samling av rene CSS3 sveveeffekter, med støtte for Bootstrap 3. Bygget på Scss CSS(fil), enkelt modifisert av variabler. Koden er modulær, det er ikke nødvendig å inkludere hele filen. 30+ ulike effekter i én pakke. Alt er ganske godt dokumentert og effektene er veldig enkle å bruke. Alt du trenger å gjøre er å bygge HTML-markeringen riktig og koble til CSS-filå jobbe.

Skaper noen enkle, men stilige sveveeffekter for bildetekster. Ideen er å holde musepekeren over miniatyrbildene for å få tittelen, forfatterens navn og kontaktknapper til å dukke opp. For noen effekter brukes 3D visuelle transformasjoner.

En veldig enkel overgangseffekt, uten noen spesielle bjeller og plystre, et helt rundt bilde i en ramme, forvandles ved å endre fokus når du svever, og det er det.

Hover-effekter for miniatyrbilder ved hjelp av CSS3

Utvikleren posisjonerer arbeidet sitt som et eksempel på et bildegalleri med overgangseffekter når merknader (tekster) vises på miniatyrbildene. Trygg støtte erklært moderne nettlesere, inkludert IE 9+. Selvfølgelig er det vanskelig å kalle det et fullverdig galleri, men effekten av utseendet til signaturer er ganske interessant.

Neste sett CSS-regler, for å skape imponerende transformasjonseffekter når du svever over perfekt runde miniatyrbilder. Pakken inneholder 7 typer CSS3-overganger, meget detaljert dokumentasjon om konfigurasjon og bruk. Effektene støttes av alle moderne nettlesere.

Roter miniatyrbilder når du holder musepekeren

En enkel effekt av å rotere runde miniatyrbilder når du holder musepekeren over dem, omtrent det samme som du kan se på bloggen min, i kunngjøringene av innlegg på hovedsiden. Implementert med et par linjer med css-kode.

Bokstavelig oversatt: "Sexy effekt når du svever over bilder." Selvfølgelig er det usannsynlig at du legger merke til noe så sexy i denne effekten, med mindre du har en vill fantasi, men effekten er interessant på sin egen måte og er verdt å ta hensyn til.

Fem forskjellige effekter for bilder når du holder musepekeren over dem. Pop-up signaturer i tre varianter, gardiner i form av å endre graden av transparens og rotasjon med horisontal bevegelse.

4 typer animasjonseffekter for bildetekster, implementert utelukkende ved bruk av CSS3. Ulike posisjoner ved opptreden og overgangseffekter, ganske standard design. For å forstå hvordan animasjon fungerer, ta en titt på kilde Jeg fant ingen demosider eller separat dokumentasjon.

Miniatyrgallerier arrangert i et rutenett med ulike effekter for utseende av signaturer, rotasjon, utvikling, pop-up, etc. Dokumentasjonen om bruk og konfigurasjon er ganske sparsom, men hvis du virkelig vil, kan du finne ut av det.

Denne effekten er ikke noe spesielt, en banal endring i lysstyrken til bilder når du svever, bortsett fra at animasjonselementer er lagt til. Du må finne ut detaljene i implementeringen selv ved å legge ut kildekoden til demoen.

Et annet sett med 10 hover-effekter for bilder, ulike modifikasjoner av miniatyrbilder ved sveving, forstørrelse, rotasjon, rotasjon, mørkning, etc.

Border animasjonseffekt

Ulike rammeanimasjonseffekter rundt bilder ser ganske attraktive ut, det er en detaljert håndbok for å sette opp og bruke den.

Originale sveveeffekter på CSS3 brukes for effektiv fremkomst av miniatyrbildetekster ved pekeren. CSS-regelsettet inkluderer 10 forskjellige effekter som du kan bruke individuelt til forskjellige bilder. Effektene er virkelig imponerende, spesielt med tanke på at det hele ble gjort med CSS3. Detaljert veiledning, vil hjelpe deg å finne ut hva som er hva.

Ideen er å lage en SVG som er en bakgrunnsform for noe tekst og blir til en annen form ved museover. På denne måten kan du lage mange ulike alternativer, i eksemplet vises tre typer overgangseffekter. Verdighet bruker SVG er at vi kan endre størrelsen på skjemaet for å matche størrelsen på den overordnede beholderen.

Glidende bilder

Essensen denne effekten er at bildet flyttes opp og ned for å avsløre bildeteksten. Hvis du jobber med stilparametrene, tror jeg du kan oppnå noen ganske fine effekter, men som standard ser alt veldig enkelt ut.

Med denne effekten er alt enkelt, bildetekster for bilder glir ut øverst til høyre eller nederst til venstre, i form av et bånd med en gjennomskinnelig mørk bakgrunn, alt er veldig enkelt omformatert ved hjelp av css-egenskaper.

En interessant løsning: miniatyrbildene presenteres i en mørk form; når du holder musepekeren over dem, vises bildene og signaturen dukker opp på en lys bakgrunn.

Bildeteksten for bildet vises fra hjørnet og utvides diagonalt over hele området av bildet.

Noen flere interessante løsninger for implementering av popup-tekster for miniatyrbilder. I nettredaktøren kan du eksperimentere med parametrene og oppnå mer imponerende resultater.

Et sett med vakre effekter når du holder musepekeren over miniatyrbilder, ulike typer utseende og utforming av bildetekster. Tynne linjer i kontrast med en litt mørkere bakgrunn skaper lettleste informasjonsblokker.

Bisarre former og en forstørrelseseffekt kombinert med den animerte effekten av utseendet til bildetekster for miniatyrbilder.

Fantastiske effekter av å overlegge ikoner på miniatyrbilder i forskjellige varianter av utseende. Eksemplet bruker et (+)-symbol skissert i en sirkel med kantradius: i CSS kan du også bruke ikonfonter for å gjøre popup-panelet mer informativt.

6 bildetekster for bilder

6 Alternativer for utseendet til popup-bildetekster ved sveving ved hjelp av CSS3. Detaljert leksjon om implementering og konfigurasjon, kilder tilgjengelig for nedlasting.

Hvordan lage noen subtile og moderne bildeteksteffekter.

Lær hvordan du lager noen enkle, men stilige sveveeffekter for bildetekster. Ideen er å ha et rutenett med figurer og bruke en sveveeffekt på elementene som vil avsløre en bildetekst med tittelen, forfatteren og en lenkeknapp.

Retningsbevisst CSS3 Hover Effect med jQuery

Lag en retningsbevisst sveveeffekt ved å bruke CSS3 og jQuery.

Lær hvordan du lager en retningsbevisst sveveeffekt ved å bruke litt CSS3-godhet og jQuery. Ideen er å la et lite overlegg gli inn på toppen av noen miniatyrbilder fra retningen vi kommer fra med musen.

Circle Hover Effects med CSS-overganger

En veiledning om hvordan du lager forskjellige sveveeffekter på sirkler med CSS-overganger og 3D-rotasjoner

Dette CSS-knappsettet består av noen enkle, kreative og subtile stiler og effekter for å inspirere deg. Effektene kan sees når du holder musepekeren på noen knapper og klikker på andre. Stort sett brukes CSS-overganger, men også CSS-animasjoner og for noen knapper brukes litt JavaScript for å legge til/fjerne effektklasser.

Ikon Hover Effects

Et sett med enkle runde ikonsveveeffekter med CSS-overganger og animasjoner til inspirasjon.

Her er en samling enkle ikonsveveeffekter. Lag en subtil og stilig effekt ved å bruke CSS-overganger og animasjoner på ankrene og deres pseudo-elementer.

Først av alt, for de som ennå ikke er helt inne i faget eller ikke er i det hele tatt, vil jeg kort forklare hva det er. Dette er ulike typer effekter (popup-tekster, verktøytips, jevne overganger, transformasjon, rotasjon, forstørrelse, forskyvning, etc., etc.) som brukes på nettsideelementer på dem med musepekeren. Disse kan implementeres enten ved hjelp av ulike jQuery-plugins eller i ren .
I dag har jeg utarbeidet et stort utvalg originale hover-effekter for bilder laget ved hjelp av CSS3, uten å koble til javascript-biblioteker. Jeg vil ikke snakke om fordelene og ulempene ved å implementere hover-effekter i ren CSS3, det er et annet emne, bare se på eksemplene og om nødvendig bruk den du liker på nettstedet ditt. Alle effekter presentert i anmeldelsen er utstyrt med et demoeksempel og detaljert dokumentasjon med kildekoder. Manualene er stort sett på borgerlig språk, men alt er mer eller mindre intuitivt.

Jeg vil umiddelbart trekke oppmerksomheten din til det faktum at alle disse eksemplene vil fungere riktig bare i moderne nettlesere som støtter CSS3-egenskaper.

For ikke å ødelegge helhetsbildet, forvrengte jeg ikke navnene på effekter med maskinoversettelse (med unntak av noen), jeg forlot originaltitlene som utvikleren kalte dem.

iHover er en imponerende samling av rene CSS3 sveveeffekter, med støtte for Bootstrap 3. Bygget på Scss CSS (fil), enkelt modifisert med variabler. Koden er modulær, det er ikke nødvendig å inkludere hele filen. 30+ forskjellige effekter i én pakke. Alt er ganske godt dokumentert og effektene er veldig enkle å bruke. Alt du trenger å gjøre er å bygge HTML-markeringen riktig og inkludere CSS-filen i arbeidet ditt.

En veldig enkel overgangseffekt, uten noen spesielle bjeller og plystre, et helt rundt bilde i en ramme, forvandles ved å endre fokus når du svever, og det er det.

Hover-effekter for miniatyrbilder ved hjelp av CSS3

Utvikleren posisjonerer arbeidet sitt som et eksempel på et bildegalleri med overgangseffekter når merknader (tekster) vises på miniatyrbildene. Sikker støtte fra moderne nettlesere, inkludert IE 9+, er erklært. Selvfølgelig er det vanskelig å kalle det et fullverdig galleri, men effekten av utseendet til signaturer er ganske interessant.

Et annet sett med CSS-regler for å skape imponerende transformasjonseffekter når du holder musepekeren over perfekt runde miniatyrbilder. Pakken inneholder 7 typer CSS3-overganger, meget detaljert dokumentasjon om konfigurasjon og bruk. Effektene støttes av alle moderne nettlesere.

Roter miniatyrbilder når du holder musepekeren

Oversatt bokstavelig: "Seksuell effekt når du svever over". Selvfølgelig er det usannsynlig at du legger merke til noe så sexy i denne effekten, med mindre du har en vill fantasi, men effekten er interessant på sin egen måte og er verdt å ta hensyn til.

Fem forskjellige effekter for bilder når du holder musepekeren over dem. Pop-up signaturer i tre varianter, gardiner i form av å endre graden av transparens og rotasjon med horisontal bevegelse.

4 typer animasjonseffekter for bildetekster, implementert utelukkende ved bruk av CSS3. Ulike posisjoner ved opptreden og overgangseffekter, ganske standard design. For å forstå hvordan animasjon fungerer, ta en titt på kildekoden til demosiden; Jeg fant ingen separat dokumentasjon.

Et annet sett med 10 hover-effekter for bilder, ulike modifikasjoner av miniatyrbilder ved sveving, forstørrelse, rotasjon, rotasjon, mørkning, etc.

Ulike rammeanimasjonseffekter rundt bilder ser ganske attraktive ut, det er en detaljert håndbok for å sette opp og bruke den.

Originale CSS3-sveveeffekter som brukes for effektiv fremtoning av miniatyrbildetekster når du holder musepekeren. CSS-regelsettet inkluderer 10 forskjellige effekter som du kan bruke separat for forskjellige bilder. Effektene er virkelig imponerende, spesielt med tanke på at det hele ble gjort med CSS3. En detaljert veiledning vil hjelpe deg å finne ut hva som er hva.

Ideen er å lage en SVG som er en bakgrunnsform for noe tekst og blir til en annen form ved museover. På denne måten kan du lage mange forskjellige alternativer, i eksemplet vises tre typer overgangseffekter. Fordelen med å bruke SVG er at vi kan endre størrelsen på skjemaet for å passe til størrelsen på den overordnede beholderen.

Glidende bilder

Essensen av denne effekten er at bildet beveger seg opp og ned for å få bildeteksten til å vises. Hvis du jobber med stilparametrene, tror jeg du kan oppnå noen ganske fine effekter, men som standard ser alt veldig enkelt ut.

En interessant løsning: miniatyrbildene presenteres i en mørk form; når du holder musepekeren over dem, vises bildene og signaturen dukker opp på en lys bakgrunn.

Bildeteksten for bildet vises fra hjørnet og utvides diagonalt over hele området av bildet.

Noen flere interessante løsninger for implementering av popup-tekster for miniatyrbilder. I nettredaktøren kan du eksperimentere med parametrene og oppnå mer imponerende resultater.

Bisarre former og en forstørrelseseffekt kombinert med den animerte effekten av utseendet til bildetekster for miniatyrbilder.

Et eksempel på å lage en visuell lysbildeeffekt for visning av 3D-teksting for bilder med kun CSS3 og HTML5.

6 bildetekster for bilder

6 Alternativer for utseendet til popup-bildetekster ved sveving ved hjelp av CSS3. En detaljert leksjon om implementering og konfigurasjon, kilder tilgjengelig for nedlasting.

Og til slutt, til slutt kan jeg ikke la være å nevne den enkleste måten å lage en popup-tekst for et miniatyrbilde ved hjelp av CSS3.

Jeg snakket om denne metoden i en av mine tidligere leksjoner:.

Med all respekt, Andrew

Først av alt, for de som ennå ikke er helt inne i faget eller ikke er i det hele tatt, vil jeg kort forklare hva det er. Dette er ulike typer effekter (popup-tekster, verktøytips, jevne overganger, transformasjon, rotasjon, forstørrelse, forskyvning osv. osv.) som brukes på nettstedelementer når du holder musepekeren over dem. Disse effektene kan implementeres ved hjelp av forskjellige jQuery-plugins eller ren .
I dag har jeg utarbeidet et stort utvalg originale hover-effekter for bilder laget ved hjelp av CSS3, uten å koble til javascript-biblioteker. Jeg vil ikke snakke om fordelene og ulempene ved å implementere hover-effekter i ren CSS3, det er et annet emne, bare se på eksemplene og om nødvendig bruk den du liker på nettstedet ditt. Alle effekter presentert i anmeldelsen er utstyrt med et demoeksempel og detaljert dokumentasjon med kildekoder. Manualene er stort sett på borgerlig språk, men alt er mer eller mindre intuitivt.

Jeg vil umiddelbart trekke oppmerksomheten din til det faktum at alle disse eksemplene vil fungere riktig bare i moderne nettlesere som støtter CSS3-egenskaper.

For ikke å ødelegge helhetsbildet, forvrengte jeg ikke navnene på effekter med maskinoversettelse (med unntak av noen), jeg forlot originaltitlene som utvikleren kalte dem.

En veldig enkel overgangseffekt, uten noen spesielle bjeller og plystre, et helt rundt bilde i en ramme, forvandles ved å endre fokus når du svever, og det er det.

Hover-effekter for miniatyrbilder ved hjelp av CSS3

Roter miniatyrbilder når du holder musepekeren

For å oversette det bokstavelig: "Seksuell effekt når du svever over". Selvfølgelig er det usannsynlig at du legger merke til noe så sexy i denne effekten, med mindre du har en vill fantasi, men effekten er interessant på sin egen måte og er verdt å ta hensyn til.

Fem forskjellige effekter for bilder når du holder musepekeren over dem. Pop-up signaturer i tre varianter, gardiner i form av å endre graden av transparens og rotasjon med horisontal bevegelse.

4 typer animasjonseffekter for bildetekster, implementert utelukkende ved bruk av CSS3. Ulike posisjoner ved opptreden og overgangseffekter, ganske standard design. For å forstå hvordan animasjon fungerer, ta en titt på kildekoden til demosiden; Jeg fant ingen separat dokumentasjon.

Et annet sett med 10 hover-effekter for bilder, ulike modifikasjoner av miniatyrbilder ved sveving, forstørrelse, rotasjon, rotasjon, mørkning, etc.

Ulike rammeanimasjonseffekter rundt bilder ser ganske attraktive ut, det er en detaljert håndbok for å sette opp og bruke den.

Glidende bilder

En interessant løsning: miniatyrbildene presenteres i en mørk form; når du holder musepekeren over dem, vises bildene og signaturen dukker opp på en lys bakgrunn.

Bildeteksten for bildet vises fra hjørnet og utvides diagonalt over hele området av bildet.

Noen flere interessante løsninger for implementering av popup-tekster for miniatyrbilder. I nettredaktøren kan du eksperimentere med parametrene og oppnå mer imponerende resultater.

Bisarre former og en forstørrelseseffekt kombinert med den animerte effekten av utseendet til bildetekster for miniatyrbilder.

Et eksempel på å lage en visuell lysbildeeffekt for visning av 3D-teksting for bilder med kun CSS3 og HTML5.

6 bildetekster for bilder

6 Alternativer for utseendet til popup-bildetekster ved sveving ved hjelp av CSS3. En detaljert leksjon om implementering og konfigurasjon, kilder tilgjengelig for nedlasting.

Og til slutt, til slutt kan jeg ikke la være å nevne den enkleste måten å lage en popup-tekst for et miniatyrbilde ved hjelp av CSS3.