Altın Konu Css'de Kayan Buton Nasıl Yapılır?

[KERİM ERBAY]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Css'de Kayan Buton Nasıl Yapılır?​

Anahtar düğmesi, bazı işlevlerin açık ve kapalı durumunu temsil etmek için kullanılabilir . Bazen radyo düğmeleri veya onay kutuları yerine geçiş düğmesi kullanılabilir. Bu derste CSS kullanarak geçiş anahtarı oluşturmayı öğreneceğiz.

Geçiş Anahtarı düğmesi için sadece temel bir yapı oluşturacağız. Aşağıdaki gibi bir HTML belgesi oluşturmak için buraya bir onay kutusu ve bir etiket koymamız gerekiyor. Bunu HTML etiket etiketini ve HTML giriş türü = onay kutusunu kullanarak yapabiliriz .

Kayar Düğme İçin HTML Kodu​

<div class="custom-checkbox">
  <input id="status"
         type="checkbox"
         name="status">
  <label for="status">
    <div class="status-switch"
         data-unchecked="Off"
         data-checked="On">
    </div>
  </label>
</div>

Umarız işaretleme kendi adına konuşur, ancak yukarıda neler olup bittiğinden emin değilseniz işte bazı noktalar:

• divGeçiş Anahtarımızın genel yüksekliğini ve genişliğini ayarlamak için kullanacağımız her şeyi bir araya getiriyoruz
• input CSS stillerimizle gizleyeceğimiz bir onay kutusu var , ana içerik label öğenin içinde olacak (kendisinin de div içinde bir tane daha var)
• Öğenin özelliği inputiçinde 'id'nin belirtilmesi, kullanıcının öğeyi tıklatarak onay kutusu öğesini işaretlemesine/işaretini kaldırmasına olanak tanırforlabelinputlabel
• İçinde slayt geçişimizin iki durumu için metni oluşturacak iki veri özelliği ( ve ) div bulunur labeldata-uncheckeddata-checked

Başlangıçta, kayan Geçiş Anahtarı için her biri açık veya kapalı durumunu temsil eden iki radyo düğmesi girişi kullanmayı denedim.

Ancak, stil bir kabusa dönüşmeden önce bu yaklaşımla ancak bu kadar ileri gidebildim, bu yüzden radyoları tek bir onay kutusuyla değiştirmeye karar verdim, bu da her şeyi çok daha kolay hale getirdi.

Kayar Geçiş Anahtarının yalnızca iki durumu olabilir; 'işaretli' veya 'işaretsiz', bir onay kutusu kullanmak daha mantıklıdır.

HTML Kod Çıkışı​

Kayar Buton İçin Css Kodu​

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
}

.custom-checkbox {
  width: 340px;
  height: 80px;
}
.custom-checkbox input#status {
  display: none;
}
.custom-checkbox input#status + label {
  height: 100%;
  width: 100%;
}
.custom-checkbox input#status + label > .status-switch {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: grey;
  color: white;
  transition: all 0.5s ease;
  padding: 3px;
  border-radius: 3px;
}
.custom-checkbox input#status + label > .status-switch:before, .custom-checkbox input#status + label > .status-switch:after {
  border-radius: 2px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  transition: all 0.3s ease;
}
.custom-checkbox input#status + label > .status-switch:before {
  background-color: white;
  color: black;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
  left: 3px;
  z-index: 10;
  content: attr(data-unchecked);
}
.custom-checkbox input#status + label > .status-switch:after {
  right: 0;
  content: attr(data-checked);
}
.custom-checkbox input#status:checked + label > .status-switch {
  background-color: #40c253;
}
.custom-checkbox input#status:checked + label > .status-switch:after {
  left: 0;
  content: attr(data-unchecked);
}
.custom-checkbox input#status:checked + label > .status-switch:before {
  color: #40c253;
  left: 50%;
  content: attr(data-checked);
}

Geçiş Anahtarının stili düz CSS'de yapılabilir, ancak SCSS'nin kullanılması öğeler hiyerarşisiyle çalışmayı kolaylaştırır.

CSS kodu çekici bir HTML bileşeni oluşturmak için kullanılır. Bu CSS özelliği, geçiş anahtarında stil oluşturmak için kullanılır.

Varsayılan onay kutusunu gizleyip ona bir kaydırıcı ekleyeceğiz.

• position Kaydırıcıyı anahtara göre konumlandırmak için bu özelliği kullanın .
• Geçiş Anahtarına height ve işaretini ekleyin .width
• background-color Açık-kapalı durumunu görüntülemek için kaydırıcıya farklı bir tane ekleyin .
• transformGeçiş Anahtarına slayt efekti eklemek için özelliği kullanın

Geçiş Anahtarını buna göre özelleştirmek için diğer CSS özelliklerini kullanabiliriz. Düğmelerimize özelleştirme eklemek için düğme özelliğini kullanırız, bu da vurgulu efekti gibi çeşitli tasarımlar eklememize olanak tanır. Düğme özelliğini özelleştirme eklemek için kullanırız. vurgulu efekt gibi çeşitli tasarımlar eklememize olanak tanıyan düğmeler.

Css Kayar Düğmenin Son Çıktısı​

sürgülü düğme css

Geçiş Anahtarının kullanımı nedir?​

Geçiş anahtarlarının en büyük kullanımı, bir sistemin tercihlerini ve işlevsel durumlarını değiştirmektir. Kullanıcıların iki karşıt durum arasında seçim yapmasına olanak sağlamak için iki onay kutusu veya iki radyo düğmesi yerine geçiş anahtarları kullanılabilir.

HTML ve CSS Kullanarak Geçiş Anahtarı Nasıl Oluşturulur?​

Ana html öğesi ve giriş türü “onay kutusu” bir geçiş anahtarı yapmak için kullanılır ve sınıf seçiciyi kullanarak buna stil verebiliriz.

 

[bLastX]

Paylaşım için teşekkürler.

 

[ShineSun]

Paylaşım için teşekkürler.

 

[Cream & Rouge]

Paylaşım için teşekkürler.