Lag morsomme animerte radioknapper med Radiobox.css

De standard HTML5-radioknapper er ganske kjedelig. Det finnes måter å tilpasse dem bruker CSS3, men de fleste teknikker fokus bare på utseende.

Radiobox.css fokuserer på utseende og stil legger til tilpassede CSS3-animasjoner til radioinnganger.

Dette biblioteket er helt gratis og åpen kilde, tilgjengelig på GitHub for nedlasting. Med dette CSS-biblioteket kan du velge fra mer enn 12 forskjellige animasjoner som gjelder for radioknapper.

Uten tilpassede CSS-stiler, vil de fortsatt ser ut som vanlige radioinnganger. Men når brukeren klikker for å velge en knapp, vil de få en gal animasjonseffekt. Du kan se levende eksempler på den viktigste Radiobox-siden som demoer hver stil ved siden av navnet sitt.

Du kan installere Radiobox rett fra npm eller bower, eller til og med laste ned filene lokalt til maskinen din. GitHub vertene alle filene i en CDN hvis du vil spille rundt uten å laste ned noe.

Den eneste filen du trenger er radiobox.min.css som skal gå rett inn i dokumenthodet. Derfra, bare du legg til en enkel klasse til hver radioknapp avhengig av hvilken animasjon du vil ha.

Her er en kodebit for “Boing” effekt:

Legg merke til “Boing” animasjon har sin egen CSS-fil kalt boing.min.css. Dette må inkluderes hvis du planlegger å bruke den effekten på siden.

Når du laster ned radiobox, bør du få en demokatalog med live demoer for alle disse effektene. Du kan bare Kopier / lim inn koden direkte til siden din for å få det til å fungere uten problemer.

Til full dokumentasjon, sjekk ut viktigste repo sammen med live demo nettsted. Hvis du vil kontakte skaperne, kan du sende en e-post fra 720kb nettside eller melding via Twitter @ 720kb_.