CSS Anahtar Üreteci

Cihazında canlı önizlemeli, saf CSS aç kapa anahtarı oluştur. Boyut, açık ve kapalı renkler, top rengi ve animasyon süresini ayarla, HTML ve CSS’i kopyala.

GizliTarayıcıdaAnındaLimitsiz

Genişlik (52px)

Yükseklik (30px)

Geçiş (0.20s)

Açık renk

Kapalı renk

Top rengi

Odak halkasını göster

Önizleme

Animasyonu denemek için anahtara tıkla. Odak halkası açıksa klavyeyle Tab ile de ulaşabilirsin.

HTML ve CSS

/* HTML */
<label class="easy24-switch">
  <input type="checkbox" />
  <span class="easy24-switch__track" aria-hidden="true"></span>
</label>

/* CSS */
.easy24-switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 30px;
  cursor: pointer;
  user-select: none;
}

.easy24-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.easy24-switch__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.easy24-switch__track::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease;
}

.easy24-switch input:checked + .easy24-switch__track {
  background: #0f6e68;
}

.easy24-switch input:checked + .easy24-switch__track::before {
  transform: translateX(22px);
}

.easy24-switch input:disabled + .easy24-switch__track {
  opacity: 0.55;
  cursor: not-allowed;
}

.easy24-switch:has(input:focus-visible) .easy24-switch__track {
  outline: 2px solid color-mix(in srgb, #0f6e68 70%, white);
  outline-offset: 3px;
}

Yalnızca HTML

<label class="easy24-switch">
  <input type="checkbox" />
  <span class="easy24-switch__track" aria-hidden="true"></span>
</label>

Bu, checkbox tabanlı bir aç kapa için dekoratif CSS’tir. Formunda input name ve value bağla; erişilebilirlik için görünür bir metin etiketi tut. :has desteklemeyen eski tarayıcılar isteğe bağlı odak halkası stilini atlayabilir.

Nasıl çalışır

Hazır ayar seç veya renkleri ayarla

Hızlı bir hazır ayarla başla veya genişlik, yükseklik, açık renk, kapalı renk, top rengi ve geçiş süresini düzenle. Daha net klavye çerçevesi istiyorsan odak halkasını açık tut.

Canlı anahtarı dene

Önizlemede tıklayarak veya Tab ile kontrolü dene. Kopyalayacağın HTML ve CSS önizlemeyi de sürdürür; gördüğün şey çıktıyla uyumludur.

Parçacığı kopyala veya indir

Birleşik HTML ve CSS’i kopyala, yalnızca HTML’i al veya switch.css indir. Her şey bu sekmede kalır

CSS Anahtar Üreteci nedir?

CSS Anahtar Üreteci, parçacık avlamadan kompakt bir aç kapa tasarlamanı kolaylaştırır. Yaygın checkbox toggle kalıplarını izleyen küçük, kendi kendine yeterli bir HTML ve CSS çifti verir; odak stili ve gerçek formlarda görünür metin etiketi ihtiyacı hakkında dürüst notlar içerir.

Neden bu araç

Checkbox ve iz span’inden saf bir CSS aç kapa üretir.
Genişlik, yükseklik, renkler ve geçiş süresini canlı önizlemeyle ayarlamanı sağlar.
Klavye kullanıcıları için isteğe bağlı odak halkası ekler.
HTML ve CSS’i birlikte kopyalamanı veya yalnızca HTML’i almanı sağlar.
Beş boyut ve renk hazır ayarıyla daha hızlı başlamanı sağlar.
İstediğin kadar kullanabilirsin. Ücretsiz planda günlük kullanım limiti yoktur.

Sorular

CSS Anahtar Üreteci ne yapar?

Yerel bir checkbox ile çalışan bir aç kapa için HTML ve CSS üretir. Görünümü tarayıcıda ayarlar, hareketi önizler ve parçacığı projene kopyalarsın.

Anahtar erişilebilir mi?

Kontrol, label içinde gerçek bir checkbox kullanır; bu ekran okuyuculara ve klavyeye yardımcı olur. Anahtarın yanına neyi açtığını anlatan görünür metin ekle ve mümkünse odak halkasını açık bırak.

JavaScript gerekir mi?

Hayır. İşaretli durum stilleri yalnızca CSS ile çalışır. Uygulaman yerel form kontrolünün ötesinde değişime tepki verecekse JavaScript gerekir.

Her tarayıcıda aynı mı görünür?

Temel açık ve kapalı stiller geniş destek görür. İsteğe bağlı odak halkası :has kullanır; bazı eski tarayıcılar bunu yok sayar. Yayından önce hedef tarayıcılarında dene.

CSS’im sunucuya gönderilir mi?

Hayır. Her şey tamamen bu tarayıcı sekmesinde çalışır.

Günlük limit var mı?

Hayır. Bu aracın ücretsiz planda günlük kullanım limiti yoktur.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç