Stvorite zabavne animirane gumbe s radiobox.css

zadani HTML5 radio gumbi su prilično dosadne. Postoje načini da prilagodite ih koristeći CSS3, ali većina tehnika usredotočite se samo na izgled.

Radiobox.css fokusiran na izgled i stil dodavanje prilagođenih CSS3 animacija na radio ulaze.

Ova knjižnica je potpuno besplatno i otvoreni izvor, za preuzimanje na usluzi GitHub. S ovom CSS knjižnicom možete odabrati s više od 12 različitih animacija koje se odnose na radio gumbe.

Bez prilagođenih CSS stilova, oni će i dalje izgledaju kao normalni radio ulazi. Ali kada korisnik klikne na gumb, oni će dobiti ludi animacijski efekt. Možeš vidjeti primjeri uživo na glavnoj stranici Radioboxa koja prikazuje svaki stil pored imena.

Možete instalirati Radiobox ravno od npm ili bower, ili čak preuzeti datoteke lokalno na vaš stroj. GitHub ugošćuje sve svoje datoteke u CDN-u ako se želite igrati bez preuzimanja bilo čega.

Jedina datoteka koju trebate jest radiobox.min.css koji bi trebao ići u glavu dokumenta. Odatle, vi samo dodajte jednostavnu klasu na svaki radio gumb ovisno o željenoj animaciji.

Evo jednog isječak koda za “Boing” posljedica:

Zabilježite “Boing” animacija ima vlastitu CSS datoteku zvao boing.min.css. Ovaj mora biti uključen ako namjeravate koristiti taj učinak na stranici.

Kada preuzmete Radiobox, trebali biste dobiti demo imenik s demo uživo za sve te učinke. Možete jednostavno kopirajte / zalijepite kôd izravno na vašu stranicu kako bi radila bez muke.

Za punu dokumentaciju, provjerite glavni repo zajedno sa live demo site. Ako želite stupiti u kontakt s tvorcima, možete poslati poruku e-pošte s adrese Web stranica 720kb ili putem Twittera '720kb_.