Web sitelerinde yer alan formlardaki checkbox etiketlerinin nasıl geçiş yapılarak aç-kapat formatına getirilebilineceğinden bahsedeceğim. Bu işlemi gerçekleştirmek için sadece CSS kodlarını kullanarak şekillendirme yapmış olacağız.
Onay kutularına geçiş animasyonu ekleyerek açık yada kapalı gibi işlemin daha belirgin bir şekilde hazırlanmasını sağlayacağız. Bu işlemi kare ve yuvarlak temalı olarak iki şekilde gerçekleştirmiş olacağız. Hangisini tercih ederseniz kullanabilir, kodlar üzerinde oynamalar yaparak sayfanıza göre düzenleyebilirsiniz.
Checkbox Hazırlığı – HTML Kodları
İlk olarak iki adet normal bir şekilde tanımlanan checkbox oluşturuyoruz. İlkini kare biçiminde, ikincisini de yuvarlak tasarımlı bir şekilde ayarlayacağız.
<label class="switchBtn"> <input type="checkbox"><div class="slide">AÇ</div> </label> <label class="switchBtn"> <input type="checkbox"><div class="slide round">AÇ</div> </label>
HTML kodlarını hazırladıktan sonra gerekli stil düzenlemelerini yapmak için CSS kodlarını oluşturalım.
Checkbox Hazırlığı – CSS Kodları
CSS kodlarıyla birlikte, standart görünüme sahip olan checkbox butonlarını özelleştirmiş olacağız.
.switchBtn {
position: relative;
display: inline-block;
width: 110px;
height: 34px;
}
.switchBtn input {
display:none
}
.slide {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
padding: 8px;
color: #fff;
} .slide:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 78px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s
}
input:checked + .slide {
background-color: #8CE196;
padding-left: 40px
}
input:focus + .slide {
box-shadow: 0 0 1px #01aeed
}
input:checked + .slide:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
left: -20px
}
.slide.round {
border-radius: 34px
}
.slide.round:before {
border-radius: 50%
}
Yukarıdaki kodlarla birlikte, HTML kodlarındaki checkbox seçim alanları için özelleştirme yapmış olduk. CSS kodları üzerinde oynamalar yaparak düzenlemeler sağlayabilirsiniz.