CSS Anahtar Oluşturucu

Bu Araç Nedir?

CSS açma/kapama anahtarı, fiziksel bir aç/kapa düğmesi gibi görünecek ve davranacak şekilde biçimlendirilmiş bir checkbox'tır — bir taraftan diğerine kayan dairesel bir topuza sahip hap şeklinde bir ray. Arka planda hâlâ gerçek bir checkbox girdisidir ve bu önemlidir: yalnızca tıklanabilir div'lerden oluşturulan bir anahtarın aksine, denetimi klavyeyle erişilebilir tutar, ekran okuyucularla kullanılabilir kılar ve form gönderimleriyle uyumlu olmasını sağlar.

Bu araç bu deseni sizin için oluşturur: gizli bir checkbox, :checked durumuna göre renk değiştiren bir ray ve CSS transform ile kayan bir topuz. Kaydırıcıları ve renk seçicileri ayarlayın, gerçek geçiş animasyonunu test etmek için önizlemeye tıklayın ve hem CSS'yi hem de bağlı olduğu minimum HTML işaretlemesini kopyalayın.

Kaynak: WAI-ARIA Authoring Practices, W3C — bir switch kontrolü için erişilebilir temel olarak gerçek bir checkbox girdisini önerir; bu nedenle bu oluşturucunun çıktısı temel input öğesini korur.

Neden Kullanmalısınız?

• Önizleme statik bir görsel değil, gerçek, tıklanabilir bir anahtardır — kullanmadan önce tam animasyonu test edebilirsiniz.
• Hem CSS'yi hem de CSS'nin bağlı olduğu erişilebilir HTML yapısını (checkbox girdisi + label) üretir.
• Ray genişliği/yüksekliği, kapalı durum rengi, açık durum rengi, topuz rengi, köşe yuvarlaklığı ve geçiş hızı üzerinde tek bir yerden tam kontrol.
• Standart checkbox + :checked seçici desenini kullanır, böylece anahtar klavyeyle gezilebilir kalır ve gerçek formların içinde çalışır.
• Tamamen tarayıcınızda çalışır — yaptığınız hiçbir ayar hiçbir yere yüklenmez.
• Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.

Nasıl Kullanılır

1. Rayın boyutunu belirlemek için genişlik ve yüksekliği ayarlayın — topuz, küçük bir iç boşlukla otomatik olarak sığacak şekilde boyutlandırılır.
2. Rayın kapalı (işaretlenmemiş) durumu için bir renk ve etkinleştirildiğinde açık durum için bir renk seçin.
3. Bir topuz rengi seçin — beyaz veya açık nötr bir renk genellikle raya karşı en güçlü kontrastı sağlar.
4. Klasik hap şeklinde bir anahtar için kenar yarıçapını %50'ye ayarlayın veya hafif yuvarlatılmış bir dikdörtgen için düşürün.
5. Topuzun ne kadar hızlı kaydığını ve ray renginin durumlar arasında ne kadar hızlı değiştiğini kontrol etmek için geçiş hızını ayarlayın.
6. Animasyonun doğru göründüğünü onaylamak için önizlemedeki anahtara tıklayın, ardından CSS ve HTML'yi projenize kopyalayın.

Örnek

Giriş

Genişlik: 52px · Yükseklik: 28px · Kapalı renk: #cbd5e1 · Açık renk: #ea580c · Yarıçap: %50 · Hız: 200ms

Çıkış

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Desenin özü: checkbox'ın :checked durumu, genel kardeş seçiciyle (~) birlikte, hem rayın arka plan rengini hem de topuzun kayma mesafesini kontrol eder.

Neden tıklama olayı olan bir div yerine checkbox

İki <div> öğesi ve tıklamada bir sınıfı değiştiren biraz JavaScript ile bir anahtar oluşturmak cazip gelebilir, ancak bu yaklaşım genellikle klavye gezintisini, ekran okuyucu duyurularını ve form gönderimini bozar — gerçek bir checkbox bu üçünü de bedavaya halleder. Bu aracın oluşturduğu desen, <input type="checkbox">'ı gerçek etkileşimli öğe olarak korur (görsel olarak gizli ama hâlâ odaklanabilir) ve rayı ve topuzu checkbox'ın yerel :checked durumuna göre biçimlendirmek için tamamen CSS kullanır — hiç JavaScript yoktur.

Yaygın anahtar stilleri

• Klasik hap anahtar: kenar yarıçapı %50, orta boyut (48–56px genişlik), açık/kapalı arasında belirgin bir renk değişimi.
• Ayarlar paneli anahtarı: daha küçük boyut (36–44px genişlik), marka renginde bir açık duruma karşı sönük kapalı renk (açık gri).
• Hafif yuvarlatılmış anahtar: tam bir hap yerine kenar yarıçapı %20–30 civarında, daha dikdörtgen, uygulama tarzı bir görünüm için.
• Hızlı, çevik anahtar: 100–150ms geçiş hızı anlık ve duyarlı hissettirir.
• Yavaş, kasıtlı anahtar: 300–400ms geçiş hızı daha pürüzsüz ve cilalı hissettirir, öne çıkan tek bir ayar anahtarı için kullanışlıdır.

Diğer CSS araçlarıyla eşleştirme

Oluşturulan ray ve topuz zaten arka planda border-radius kullanıyor, bu yüzden kaydırıcının sunduğunun ötesinde köşeli veya farklı şekilde yuvarlatılmış bir varyant istiyorsanız, Kenar Yarıçapı Oluşturucu değeri yapıştırmadan önce her köşeyi bağımsız olarak ince ayar yapmanıza olanak tanır. Kutu Gölgesi Oluşturucu, ekstra derinlik için topuza hafif bir gölge eklemek açısından kullanışlıdır.

→ Kenar Yarıçapı Oluşturucu · Kutu Gölgesi Oluşturucu

Sıkça Sorulan Sorular