Dette avkrysningsbiblioteket tilbyr dusinvis av gratis CSS-boksestiler

Leter du etter tilpassede kryssrør UI-stiler for nettstedet ditt? Ta en titt på CSS Checkbox-biblioteket som er hostet gratis på GitHub.

Dette massive biblioteket støtter dusinvis av stiler for bokseposter, for eksempel skyveknapper, på / av-design, sirkler og firkanter blant mange andre former.

Du får 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 det også fullt åpent og tilgjengelig for både personlige og kommersielle prosjekter .

For å komme i gang kan du besøke GitHub repo og laste ned alle filer lokalt til maskinen . Eller du kan installere biblioteket via npm.

Som standard kommer hver boksestil med sin egen klasse . checkboxes.min.css stylesheet har alt du trenger, så hvis det er inkludert på siden din så er du klar.

Hver boksestil 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 på siden din, må du bare grave gjennom alle stilene på hoveddemoen og se hva som skiller seg ut.

Derfra kan du velge det som fungerer best. Ved å klikke på HTML-knappen vises 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 stress, veldig lite tilpasning, og i utgangspunktet ingen koding ferdigheter kreves.

Du vil legge merke til at hver avkrysningsstil kommer i både et lyst 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 bruke tilleggsklasser som .ckbx-small eller .ckbx-xlarge å øke størrelsen.

Med 25 + forskjellige stilarter og mange forskjellige animasjoner, må jeg si at dette CSS Checkbox Library er imponerende. Flott for enhver frontend-utvikler som ønsker å spare tid i arbeidsflyten og forbedre UI-designen til et hvilket som helst webskjema .