Dette avkrysningsbiblioteket tilbyr dusinvis av gratis CSS-boksestiler
Ser etter tilpassede avkrysningsboks brukergrensesnitt for ditt nettsted? Ta en titt på CSS Checkbox Library Hosted gratis på GitHub.
Dette massive biblioteket støtter dusinvis av stiler for boksene, for eksempel skyveknapper, på / av design, sirkler og firkanter blant mange andre former.
Du få full tilgang til HTML / CSS-koden, så det er en bris å få det opp og kjører på nettstedet ditt. For ikke å nevne det er også fullt åpent og tilgjengelig for både personlige og kommersielle prosjekter.
For å komme i gang kan du besøke GitHub repo og Last ned alle filene lokalt til maskinen din. Eller du kan installere biblioteket via npm.
Som standard, hver boks stil kommer med sin egen klasse. De checkboxes.min.css stilark har alt du trenger, så hvis det er inkludert på siden din så er du helt klar.
Hver boks stil støtter moderne nettlesere og de eldste nettleserne, inkludert IE9+.
Arbeidsflyten for dette biblioteket er kanskje det enkleste jeg noensinne har sett. Når du har stilarket lagt til din side, bare grave gjennom alle stilene på hoveddemoen og se hva som skiller seg ut.
Derfra kan du velge det som fungerer best. Klikk på HTML-knappen viser en modal med kildekoden for den avmerkingsboksen. Bare kopier / lim det inn på nettstedet ditt, gi det riktig navn / verdi (hvis aktuelt), og du er helt klar!
Ingen problemer, svært liten tilpasning, og i utgangspunktet ingen koding ferdigheter kreves.
Du vil legge merke til hver boks stil kommer i både et lys og mørkt tema, for større støtte. Dette betyr at du ikke burde ha problemer med å finne en avkrysningsboks som passer med nettstedet ditt. I tillegg kan du bruk tilleggsklasser som for eksempel .ckbx-small eller .ckbx-XLarge for å øke størrelsen.
Med 25 + forskjellige stilarter og mange forskjellige animasjoner, Jeg må si at dette CSS Checkbox-biblioteket er imponerende. Flott for enhver frontend-utvikler som ønsker å spare tid i arbeidsflyten og forbedre brukergrensesnittets utforming av ethvert webskjema.
