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.

Pictaculous - Få din fargepalett via e-post

Vi er fans av fargeværktøy og fargeplukkere fordi de gjør våre liv som designere helt tapt enklere. Verktøy som 0to255 hjelper oss med å finne HEX-koder for farge nyanser, mens Adobe Kuler lar oss generere fargeskjemaer fra en iOS-enhet. I dag skal vi vise deg et fargepalettegeneratorverktøy kalt Pictaculous.Den sp

(Tekniske og design tips)

10 Viber Funksjoner du trenger å vite [Android]

Som en meldingsapp har Viber utviklet seg ganske mye siden den ble lansert i 2010. Viber har ikke bare de vanlige funksjonene til andre meldingsapps, det tar det enda lenger med klistremerker og uttrykksikoner som muliggjør mer tilpasning . For tiden er det over 200 millioner Viber-brukere lokalisert i over 193 land.

(Tekniske og design tips)