Varsayılan Html5 radyo butonları oldukça sıkıcı. CSS3 kullanarak kendinize göre bunları kişiselleştirebilirsiniz. Fakat bu tekniklerin çoğu sadece görünüşe odaklanıyor.
Radiobox.css hem dış görünüşe odaklanıyor hem de CSS3 animasyonlar uygulamayı mümkün kılıyor.
Bu kütüphane açık kaynak kodlu ve tamamen ücretsiz. GitHub üzerinden buradan indirebilirsiniz. 12 farklı animasyondan birini seçip radyo butonlarına uygulayabilirsiniz.
CSS stilleri çıkarırsak, tamamen normal radyo butonları gibi görünür. Fakat kullanıcı bu radyo butonları seçtiğinde çılgın animasyon efektleriyle karşılaşır. Bu sayfada demosunu görebilirsiniz.
Radibox’ı ister bower ister npm olarak indirebilirsiniz.
İhtiyacınız olan tek dosya radiobox.min.css dosyasıdır. Bu dosyaya HTML sayfasının head etiketleri içinde yer vermelisiniz. Böylece artık her radyo butonuna yalnızca tek bir class ekleyerek dilediğiniz animasyon efektini oluşturabilirsiniz.
Aşağıda boing efekti için kod parçası örneği verilmiştir:
|
1
|
<input type="radio" class="radiobox-boing"> |
Boing animasyonunu kullanmak isterseniz sayfanın kaynak kodunun en üst kısmındaki head etiketi içinde boing.min.css dosyasını çağırmalısınız.
Eğer Radibox yükleyecekseniz, demo dizinini de almalısınız. Burada tüm efektler için canlı demo örnekleri bulunuyor. Tek yapmanız gereken bu kodları kopyalayıp sayfanıza yapıştırarak kullanmak.