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_.

Få din egen personlige sky med PClouds

Få din egen personlige sky med PClouds

Cloud storage har utvilsomt blitt en svært viktig del av vårt daglige liv . Nå som vi er koblet til via flere enheter, er det raskt å bli en nødvendighet i stedet for en luksus med å få tilgang til våre filer hvor som helst og overalt.Men skyen kommer med sine egne risikoer: du er avhengig av en tredjepartsserver, og spesielt nå er det alltid fare for at personvernet og sikkerheten til dataene dine blir kompromittert . Hvis di

(Tekniske og design tips)

7 SEO tips for å øke din lokale virksomhet

7 SEO tips for å øke din lokale virksomhet

Søkemotoroptimalisering er en komplisert, metodisk og viktig del av en hvilken som helst Internett-bedrift, eller en hvilken som helst bedriftens enhet for den saks skyld. Uten SEO vil nettstedet ditt bare bli begravet under den rottende bunken av søkemotorresultater, og du får nesten null konverteringer. M

(Tekniske og design tips)