Radiobox.css के साथ मज़ा एनिमेटेड रेडियो बटन बनाएँ
डिफ़ॉल्ट HTML5 रेडियो बटन बहुत बोरिंग हैं। के तरीके हैं उन्हें अनुकूलित करें CSS3 का उपयोग करना, लेकिन अधिकांश तकनीकें केवल लुक पर ध्यान दें.
Radiobox.css पर केंद्रित दिखता है तथा अंदाज रेडियो इनपुट के लिए कस्टम CSS3 एनिमेशन जोड़ना.
यह लाइब्रेरी है बिलकुल मुफ्त तथा खुला स्त्रोत, GitHub पर उपलब्ध डाउनलोड करने के लिए। इस सीएसएस पुस्तकालय के साथ, आप से चुन सकते हैं 12 से अधिक विभिन्न एनिमेशन जो रेडियो बटन पर लागू होता है.
कस्टम सीएसएस शैलियों के बिना, वे अभी भी करेंगे सामान्य रेडियो इनपुट की तरह देखें. लेकिन जब उपयोगकर्ता एक बटन का चयन करने के लिए क्लिक करता है तो वे करेंगे एक पागल एनीमेशन प्रभाव मिलता है. आप देख सकते हैं जीवंत उदाहरण मुख्य रेडियोबॉक्स पृष्ठ पर जो अपने नाम के आगे प्रत्येक शैली को प्रदर्शित करता है.
आप Radiobox स्थापित कर सकते हैं npm या बोवर से सीधे, या यहां तक कि अपनी मशीन के लिए स्थानीय रूप से फ़ाइलों को डाउनलोड करें। GitHub अपनी सभी फाइलों को एक सीडीएन में होस्ट करता है आप कुछ भी डाउनलोड किए बिना चारों ओर खेलना चाहते हैं.
केवल वही फ़ाइल है जिसकी आपको आवश्यकता है radiobox.min.css जो जाना चाहिए आपके दस्तावेज़ के प्रमुख में. वहाँ से, तुम बस एक साधारण वर्ग जोड़ें आप चाहते हैं कि एनीमेशन के आधार पर प्रत्येक रेडियो बटन के लिए.
यहाँ एक है सांकेतिक टुकड़ा के लिए “बोईंग” प्रभाव:
ध्यान दें “बोईंग” एनीमेशन है अपनी खुद की सीएसएस फ़ाइल बुलाया boing.min.css. इस शामिल किया जाना है यदि आप पृष्ठ पर उस प्रभाव का उपयोग करने की योजना बनाते हैं.
जब आप रेडिओबॉक्स डाउनलोड करते हैं तो आपको करना चाहिए एक डेमो निर्देशिका प्राप्त करें साथ में इन सभी प्रभावों के लिए लाइव डेमो. आप बस कर सकते हैं कोड को कॉपी / पेस्ट करें बिना किसी परेशानी के इसे प्राप्त करने के लिए सीधे अपने पृष्ठ पर जाएं.
के लिये पूर्ण प्रलेखन, इसकी जाँच पड़ताल करो मुख्य रेपो इसके साथ लाइव डेमो साइट. यदि आप रचनाकारों से संपर्क करना चाहते हैं तो आप ईमेल भेज सकते हैं 720kb वेबसाइट या ट्विटर के माध्यम से संदेश @ 720kb_.
