Δημιουργήστε κινούμενα κουμπιά ραδιοφώνου με το Radiobox.css

ο προεπιλεγμένα κουμπιά επιλογής HTML5 είναι αρκετά βαρετό. Υπάρχουν τρόποι να να τα προσαρμόσετε χρησιμοποιώντας CSS3, αλλά οι περισσότερες τεχνικές εστιάστε μόνο στην εμφάνιση.

Radiobox.css επικεντρώνεται σε φαίνεται και στυλ προσθέτοντας προσαρμοσμένες κινήσεις CSS3 σε εισόδους ραδιοσυχνοτήτων.

Αυτή η βιβλιοθήκη είναι εντελώς δωρεάν και ανοιχτή πηγή, διαθέσιμη στο GitHub για λήψη. Με αυτή τη βιβλιοθήκη CSS, μπορείτε να επιλέξετε από περισσότερες από 12 διαφορετικές κινήσεις που ισχύουν για τα κουμπιά επιλογής.

Χωρίς προσαρμοσμένα στυλ CSS, θα παραμείνουν ακόμα μοιάζουν με κανονικές εισόδους ραδιοφώνου. Αλλά όταν ο χρήστης κάνει κλικ για να επιλέξει ένα κουμπί, θα το κάνει πάρτε ένα τρελό εφέ κίνησης. Μπορείς να δεις ζωντανά παραδείγματα στην κύρια σελίδα του Radiobox, η οποία προβάλλει κάθε στυλ δίπλα στο όνομά του.

Μπορείτε να εγκαταστήσετε το Radiobox κατ 'ευθείαν από npm ή bower, ή ακόμα και να κατεβάσετε τα αρχεία τοπικά στο μηχάνημά σας. GitHub φιλοξενεί όλα τα αρχεία τους σε CDN αν θέλετε να παίξετε χωρίς να κατεβάζετε τίποτα.

Το μόνο αρχείο που χρειάζεστε είναι radiobox.min.css που πρέπει να πάει δεξιά στο κεφάλι του εγγράφου. Από εκεί, απλά προσθέστε μια απλή κλάση σε κάθε κουμπί επιλογής ανάλογα με την κινούμενη εικόνα που θέλετε.

Εδώ είναι α αποσπάσματος κώδικα για το “boing” αποτέλεσμα:

Σημειώστε το “boing” κινούμενα σχέδια έχουν το δικό του αρχείο CSS που ονομάζεται boing.min.css. Αυτό πρέπει να συμπεριληφθεί εάν σκοπεύετε να χρησιμοποιήσετε αυτό το αποτέλεσμα στη σελίδα.

Όταν κάνετε λήψη του Radiobox θα πρέπει πάρτε έναν κατάλογο επίδειξης με ζωντανά demos για όλα αυτά τα αποτελέσματα. Μπορείτε απλά αντιγράψτε / επικολλήστε τον κώδικα απευθείας στη σελίδα σας για να λειτουργήσει χωρίς παρενόχληση.

Για πλήρη τεκμηρίωση, δείτε το κύρια επαναγορά μαζί με live demo site. Εάν θέλετε να επικοινωνήσετε με τους δημιουργούς, μπορείτε να στείλετε ένα μήνυμα ηλεκτρονικού ταχυδρομείου από το 720kb ιστοσελίδα ή μήνυμα μέσω Twitter @ 720kb_.