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


Stil dine egne kryssboks animasjonseffekter med Checkbox.css

I et nylig innlegg dekket jeg et morsomt animasjonsbibliotek for egendefinerte radioknapper, drevet av CSS .

Det gratis biblioteket ble utgitt av 720kb og så raskt et oppfølgingsalternativ som heter Checkbox.css . Dette fungerer på en lignende måte, bortsett fra at det restyler og animerer HTML-boksene .

Dette biblioteket kommer som en serie med biblioteker med tre forskjellige formål :

  1. Radiobox.css - egendefinerte radio animasjoner
  2. Checkbox.css - egendefinerte boks animasjoner
  3. Checked.css - stiler og animerer eksisterende utvalgte elementer (radioer og boksene)

Disse er alle utviklet av samme lag, og de fungerer på samme måte. Men du må inkludere hvert bibliotek individuelt hvis du vil få full effekt.

Ta en titt på Checkbox.css GitHub for å se noen av disse funksjonene og hvordan de fungerer. Som standard stole de på 2D-transformasjoner sammen med CSS-overganger, avhengig av nettleserstøtte.

Ingen av disse bibliotekene kommer med JS-fallback-metoder, så de jobber egentlig bare for CSS-drevne animasjoner . Men et raskt blikk på demosiden burde ha deg glad for å legge til disse animasjonene på siden din.

Prosessen kunne ikke vært enklere, og det krever lite-å-nei kodingskunnskap (selv om det alltid er nyttig å ha noen).

Når CSS-stilarket er på siden, legg du bare til en klasse i avkrysningsruten med formatet checkbox-x hvor "x" representerer hvilken animasjon du vil ha . For eksempel, her er koden for "hopp" animasjonseffekten:

Den beste delen er hvordan dette biblioteket kan fungere sammen med radioknappformatet . Jeg vil definitivt anbefale Checked.css biblioteket hvis du vil animere eksisterende valgte elementer .

Ikke la alle disse avhengighetene skremme deg. Nesten alle kan sette opp Checkbox.css biblioteket eller noen av de relaterte bibliotekene, alt fra begynnelsen med en liten kopi og liming .

Og hvis du har spørsmål eller forslag til denne pakken med input animasjonsbiblioteker, kan du sende meldinger til skaperne via deres nettsted eller på Twitter @ 720kb_.

20 Mest Ønskede Apple Watch Tips og triks

20 Mest Ønskede Apple Watch Tips og triks

Har du spørsmål om hvordan du gjør noe på din nye Apple Watch? Å se hvordan dette er den første generasjonen av Apple Watch, har du sannsynligvis mange spørsmål om hvordan du bruker den. For det første må Apple Watch være parret med iPhone. Dette gjør det mulig å gjøre mange ting som synkroniseringsbilder, musikk, mottar appvarsler og lokaliser din iPhone.Hvis du ønske

(Tekniske og design tips)

20 Interessante spillkort du kan kjøpe

20 Interessante spillkort du kan kjøpe

Å spille kort er et av de mest interessante brettspillene i alle tider. De spilles i alle deler av verden av mennesker i ulike aldre, kulturer og smaker. På grunn av dette blir spillekort ofte gjort til de mest interessante og kreative designene. Så i dette innlegget skal jeg vise frem hvordan certian designere har spredt ut sin kreativitet på spillekort .Fra

(Tekniske og design tips)