no.hideout-lastation.com
Paradis For Designere Og Utviklere


10 CSS-biblioteker for bedre bildeoverføringseffekter

Å la brukerne enkelt og tydelig vite hvilken del av nettsiden som kan klikkes, er en viktig del av UX-design. Den gamle, men gullske måten å gjøre det på, var å endre tekstfargen og understreke den. I dag, med CSS, er det mange flere måter å levere sveveffekter på, spesielt på bilder.

Utviklere kan nå legge til overgangseffekter eller animasjoner når en svinghendelse blir utløst . Vi ser på retningsbilder, zoomer i forskjellige hastigheter, fade-ins og fade-outs, hengsel effekter, spotlight avslører, wobbles, hopper og mer.

I denne kompilasjonen er det mer enn 250 svever effekter som inspirerer deg. Du kan også hente koden ved kilden.

Bildeoverføringseffekter (16 effekter)

På denne siden finner du en fin samling av 16 hover-bildeeffekter med bildetekster. Ta tak i HTML- og CSS-koden for hver effekt ved å svinge over bildene, og klikk deretter på Vis kode .

Bildebilde Hover Animasjon (4 effekter)

Her er 4 kule bildetekst animasjoner som kjører når man svinger over bildet. Effektene er bygd med rene CSS3-overganger og transformer, og ingen JavaScript, for å øke kompatibiliteten på tvers av nettleseren.

iHover (35 effekter)

iHover er en samling av sveveeffekter drevet av CSS3. Det er 20 sirkelhøyereffekter og 15 kvadratiske svingereffekter. For å bruke effektene, må du skrive noen HTML-oppslag og inkludere CSS-filene.

Image Hover (44 effekter)

Dette biblioteket inneholder 44 effekter laget med rent CSS. Noen av effektene inkluderer fades, skyver, lysbilder, hengsler, avslører, zoomer, blurs, flips, folder og skodder, i flere retninger. Det er en utvidet versjon av 216 effekter som kan kjøpes for € 14.

Hover Effect Ideas (30 effekter)

Dette bildet hover demo laget av Codrop, gir deg inspirasjon når du gjør jevne overganger mellom bilder og dets bildetekster. Det er totalt 30 effekter på to sett med opplæringsprogrammer og kildekoden.

Hover CSS (108 effekter)

Hover CSS lar deg legge til sveveeffekter på ethvert element, for eksempel en knapp, lenke eller bilde. Effektene inkluderer 2D-overganger, bakgrunnsoverganger, kantlinje, skygge og glødoverganger og mer. Biblioteket er tilgjengelig i CSS, Sass og LESS.

Animasjon (100 + effekter)

Det er mer enn 100 animasjoner for bildebøyle til knapper, overlegg, detaljer, bildetekster, bilder og sosiale medier knapper. Alle effekter er drevet av CSS3.

Caption Hover Effect (7 effekter)

Det er 7 forskjellige effekter i denne samlingen. Alle overgangene ser veldig fine og glatte ut. Gå til opplæringsdelen for å lære hvordan du bruker disse effektene på prosjektet.

CSS Image Hover Effects (15 effekter)

En samling av enkle sveveeffekter som zoom, lysbilde, rotere, gråskala, uskarphet, opasitet og andre grunnleggende effekter. Du kan bruke disse effektene ved å legge til CSS-klassen før figure din.

Retningsbestemt 3D-hover-effekt

Dette er en superkul svever effekt som vil oppdage din siste musbevegelse. Bildetekstene åpnes fra en av fire retninger basert på din siste markørposisjon.

Hover Animasjon

Her er en grensevev animasjon inspirert fra UNIQLO. Ved en svinghendelse blir grensen til bildet animert.

Fliser med animert bøyle

En for fliser design, denne har langsom zoom, lysbilder, pop-ins, dimmet overlegg blant andre.

SVG clip-path Hover Effect

En super fantastisk røntgen spotlight bilde hover effekt drevet av SVG clip-path og CSS overganger. Fungerer bra på Chrome, Opera og Safari.

En titt på: Fonter brukt i logoer av populære merker

En titt på: Fonter brukt i logoer av populære merker

Finn du deg selv stirrer på en annen designers logo og prøver å dechiffrere hvilket skrifttype de bruker? Hvis du er designer, er det sannsynligvis en uunngåelig vane. Det er ingen harde og raske regler for å hjelpe deg med å finne ut hvilket skrifttype du skal lande på for logoen din. Og på grunn av det faktum at vi er dusjet med tusenvis av frie fronter på Internett, kan det være en utfordrende oppgave å bestemme hvilken ideell skrifttype som skal brukes.Hvis du ha

(Tekniske og design tips)

Bygg Responsive Sorterable Grid Layouts With This Script

Bygg Responsive Sorterable Grid Layouts With This Script

Egendefinerte grensesnitt er noen av de tøffeste funksjonene å skape fra grunnen av. Du kan finne mange mursteinplugger, men de har sine egne begrensninger og krav .Muuri-skriptet er et sterkt alternativ for alle som trenger sorterbare og responsive gridelementer med berøringsstøtte .Den er bygget på Velocity.js f

(Tekniske og design tips)