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


Hover.css - CSS3-bibliotek med mer enn 40 svingende effekter

Når du arbeider med problemet med å prøve å få brukerne oppmerksomhet, er det mange måter for deg å oppnå dette. For spesielle tilfeller er svever en flott måte å trekke oppmerksomhet på en link eller knapp. Normalt virker svever ved å endre elementfarge eller gradienttilstand når brukere beveger sine markører over det. Men med mange funksjoner i CSS3, kan mange ting også tilpasses med hover-effekten. En av dem bruker animasjon. Og Hover.css kan få det til å skje med letthet.

Hover.css er et gratis CSS bibliotek for enkelt å bruke animasjon ved hjelp av svinger effekten. Du kan bruke svingeren i samtale til handlinger, knapper, logoer, bilder og mye mer. Dette biblioteket kommer med over 40 effekter å velge mellom, og de er kategorisert i henhold til følgende: 2D-transformasjoner, grenseoverganger, skygge- og glødoverganger, talebobler og sidekrøller .

Komme i gang med svinger

For å komme i gang må du laste ned Hover og deretter sette hover.css filen i prosjektmappen din. Eller hvis du foretrekker det, kan du bruke hover-min.css, en mer kompakt versjon, som er mindre og raskere å laste. Til slutt kobler du filen til nettsiden din slik:

 ..  .. 

Legge til bøyle i et element

For å legge til en kul hover effekt i elementet, bare ta med effekten navnet i elementet klassen. Du kan se live-demoen for alle tilgjengelige effekter i overføringssideen. Pass på at du bare bruker små bokstaver, og hvis den har mellomrom, bare erstatt den med et dash.

La oss si at jeg har følgende linkoppretting:

 

Hvis stylet riktig, kommer lenken ut som slik:

Lenken har endret seg for å se ut som en knapp. Men når jeg flytter markøren over det, vil knappen ikke endres og forblir statisk. Med en av Hover-effekten, Hover Shadow, redigerer jeg oppmerkningen og legger den til en klasse slik:

 

Nå har knappen en kul hover effekt som flyter med en skygge under den akkurat som følgende GIF-demo.

Noen Hack og Tilpasning

Hvis du åpner hover.css med en editor, vil du oppdage at hver effekt kommer med noen standardegenskaper. Disse egenskapene gir elementet det mest ønskede resultatet både for visning og utseende. Nedenfor er standardegenskapene, fortsett og tilpass dem for å dekke dine behov:

  • display : Kreves for å få effekt på arbeidet.
  • transform : brukes til CSS3 transformasjoner for å forbedre ytelsen på mobil og nettbrett
  • box-shadow : gi gjennomsiktig boks skygge forårsaker kanter av CSS3 transformert elementer på mobil / tablett ser jevnere ut

Endelig tanke

Hover er en annen best praksis med CSS3 implementering. Men siden de fleste effekter som overganger, transformasjoner og animasjoner bruker nye CSS3-funksjoner, må du gjøre litt ekstra arbeid på gamle nettlesere som ikke støtter disse funksjonene for å sikre at fallback-hover-effekten fungerer bra.

Facebook Tidslinjedeksel: 40 (Virkelig) Kreative eksempler

Facebook Tidslinjedeksel: 40 (Virkelig) Kreative eksempler

Bare hvis du ikke visste, er Facebook Timeline den siste funksjonen som ble introdusert i den nylige Facebook-konferansen, F8. Det er vanligvis en fullstendig overhaling av profilsiden med den nye muligheten til å vise statusoppdateringene i en liste sortert etter tid, derav navnet.Med denne nye funksjonen kommer en ny måte å introdusere deg selv om det er grafisk annet enn profilbilde, og vi kaller det Timeline Cover . O

(Tekniske og design tips)

15 Essential Twitch Tips og triks du bør vite

15 Essential Twitch Tips og triks du bør vite

Twitch er en av de populære plattformene for å se live videoer. Selv om det startet som en spill-streaming-tjeneste, tilbyr den nå alt fra gjenoppretting av klassiske show til sendinger fra artister, spillere, og hvem som ikke.Twitch er bygget for å gi en fantastisk opplevelse til både streamers og seere, og tilbyr mange funksjoner for ikke å savne noen av dem. Når

(Tekniske og design tips)