Çarşamba 25 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. CSS
  3. Radiobox.css ile Animasyonlu Radyo Düğmeleri
 Radiobox.css ile Animasyonlu Radyo Düğmeleri
CSS HTML5

Radiobox.css ile Animasyonlu Radyo Düğmeleri

Yazar : Bilal UÇAR 13 Nisan 2017 1 Comment

HTML5 ‘in default olarak radyo düğmeleri oldukça sıkıcıdır. CSS kullanarak renklendirme yapılması göze hoş gelebilir ancak yeterli değildir. Radiobox.css radio butonlara animasyon katmanızı sağlar.

Radiobox.css, radyo girişlerine özel CSS3 animasyonları ekleyerek, stil üzerine odaklanmaktadır.


Varsayılan HTML5 radyo düğmeleri oldukça sıkıcıdır. CSS3’ü kullanarak onları özelleştirmenin yolları vardır, ancak çoğu teknik yalnızca görünümlere odaklanır.

Bu kütüphane tamamen ücretsiz ve açık kaynaktır, GitHub’dan kütüphaneyi indirebilirsiniz. Bu CSS kütüphanesi ile, radyo düğmeleri için geçerli olan 12’den fazla farklı animasyondan seçim yapabilirsiniz.

Özel CSS stilleri olmadan, normal radyo girdileri gibi görünürler. Ancak kullanıcı bir düğmeyi seçmek için tıkladığında, değişik animasyon efekti elde edersiniz. Ana Radyobox sayfasında, her stilin adının yanında demolarını denyerek canlı örnekler bulabilirsiniz.

Radiobox’u doğrudan npm veya bower’dan yükleyebilir veya dosyaları yerel olarak makinenize indirebilirsiniz.


İhtiyacınız olan tek dosya, radiobox.min.css’dir. Buradan, istediğiniz animasyona bağlı olarak her radyo düğmesi için basit bir sınıf ekleyin.

İşte “boing” efekti için bir kod parçası:

“Boing” animasyonunun boing.min.css adlı kendi CSS dosyasına sahip olduğuna dikkat edin. Sayfada bu efekti kullanmayı planlıyorsanız, bu eklenmelidir.

Radiobox’u indirirken, tüm bu efektler için canlı demolar içeren bir demo dizini almalısınız. Kolaylıkla kodunuzu sayfanıza kopyalayıp yapıştırabilirsiniz, zahmetsizce çalışması için.

Tam dokümantasyon için, canlı demo sitesiyle birlikte ana repo’yu kontrol edin. Geliştiricilerle iletişime geçmek istiyorsanız, 720 kb web sitesinden veya mesajı Twitter @ 720kb_ yoluyla iletişime geçebilirsiniz.

Bu makalede radio butonlara animasyon ekleyebilmenizi sağlayan Radiobox.CSS kütüphanesini tanıttık. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: html5 radiobutton animasyon radio butona animasyon nasıl verilir radiobox.css radiobox.css kullanımı radiobox.css ne işe yarar
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

1 Yorum

  • Omer Faruk says:
    24 Nisan 2017 at 15:23

    Mükemmel ! Teşekkür ederiz.

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.