CSS ile iOS Benzeri AÇ/KAPA Düğmesi

Apple‘ın mobil cihazları için geliştirdiği iOS8‘in bol bol konuşulduğu bugünlerde Adobewordpress olarak biz de işletim sisteminin ayar ekranlarında kullanılan aç/kapa (switch) tasarımını CSS ile hazırlayacağız. Daha önceki checkbox tasarımlarımızda olduğu gibi bunda da input öğesini görünmez kılıp etrafına gizlediğimiz öğelerle uygulamak istediğimiz tasarımı çıkarmaya çalışacağız.

Bu makalemizde sadece CSS ile checkboxlarımızı stilize edeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

Apple iOS8 benzeri checkbox tasarımı nasıl yapılır?

Çok fazla kod yazmayacağız belki ama bu işimizin kolay olacağı anlamına gelmiyor. Özellikle CSS tarafında biraz döktürmemiz gerekecek.

Hedefimiz olabildiğince üstteki tasarımı yakalamak. CSS kodlarımız ile başlayalım!

CSS Kodları

İlk olarak çerçeve niteliği görecek label elemanımızı hazırlayalım. Fare ile üzerine gelindiğinde pointer çıkmalı, taşmaları önlemesi için relative ve block yapıda olmalı, sınırları belli olmalı ve köşeleri oval yapıda olmalı.

label.iOS8 {
  margin:150px auto;
  display: block;
  width: 65px;
  position:relative;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
}

Şimdi orjinal checkboxlarımızı görünmez yapalım.

.ackapa {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

Şimdi de tasarımımızın temelini oluşturacak arkaplan öğesini hazırlayalım.

.arkaplan {
  position: relative;
  display: block;
  height: inherit;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 0 2px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.20s ease-out;
  transition: 0.20s ease-out;
  -webkit-transition-property: opacity background;
  transition-property: opacity background;
}

.arkaplan:before, .arkaplan:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}

Checkbox işaretlendiğinde arkaplan yeşil olmalı.

.ackapa:checked ~ .arkaplan {
  background: #42cc55;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

Yuvarlak öğenin seçilmemiş halinin tasarımıyla devam edelim.

yuvarlak {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 30px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, white 45%, #f0f0f0);
  background-image: linear-gradient(to bottom, white 45%, #f0f0f0);
  -webkit-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

Checkbox işaretlendiğinde yuvarlak sağa yaklaşmalı.

.ackapa:checked ~ .yuvarlak {
  left: 32px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.1);
}

CSS kodlarımız bu kadar.

HTML Kodları

Aşağıdaki kodlarını body içerisinde checkbox’ın gösterileceği yere eklemeniz yeterli.

<label class="iOS8">
	<input type="checkbox" class="ackapa">
	<span class="arkaplan"></span>
	<span class="yuvarlak"></span>
</label>

iOS8 tasarım öğelerinin web tasarımındaki yeri

Birçok kod paylaşım sitesinde Apple’ın mobil cihazlar için ürettiği tasarımlar webe uyarlanmakta. Bu birlikte oluşturduğumuz tasarım da bu kervana katılmaya aday. Apple cihazlarda görmekten hoşnut olduğumuz öğeleri yorum alanında belirtebilirsiniz. Böylece günün birinde onları da HTML ve CSS ile yeniden şekillendiririz!

İyi çalışmalar.