LockSwitches – Kilit benzeri hazırlanmış onay kutusu

LockSwitches José Barcelon-Godfrey tarafından hazırlanmış bir Css3 switch buton örneği.  Basit  checkbox (onay kutusu) örneğine css3  kullanarak  farklı bir  görüntü kazandırmış. Normalde  tıklandığında  içinde  okey işareti beliren checkboxlar bu örnekte tıklandığında slayt  bir işlem gerçekleşiyor. Resimde  de gördüğünüz  gibi  bir tarafta  açık kilit bir taraftada kapalı kilit  bulunuyor. Checkbox alanını her tıkladığınızda ortada  bulunan sarı ve beyaz renklerle oluşturulmuş olan işaret bir  sağa bir  sola hareket ediyor.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body {
 background:#ccc url(bg.png);
background-size: 180px;
}

::selection {background:transparent;}

.box {
  width:120px;
  height:50px;
  margin:50px auto 0px auto;
}
input[type="checkbox"]{display:none;}

label[for="lock"] {
  float:left;
  display:block;
  width:60px;
  height:20px;
  padding:3px;
  margin:0px 10px;
  border-radius:30px;
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 2px 10px #666,
    0 2px 5px #eee;
}

label[for="lock_one"] {
  float:left;
  display:block;
  width:60px;
  height:20px;
  padding:3px;
  margin:0px 10px;
  border-radius:30px;
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 2px 10px #666,
    0 2px 5px #eee;
}

.switch {
  display:block;
  width:10px;
  height:10px;
  padding:5px;
  background:#eee;
  box-shadow:inset 0 0 5px rgba(255, 165, 0,0.25),
    0 0 5px #888;
  border-radius:20px;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;

}

.switch:after {
  content:'';
  display:block;
  margin:0;
  width:10px;
  height:10px;
  background:#ffa500;
  border-radius:8px;
  box-shadow:inset 0 0 3px #555;
}

input[type="checkbox"]:checked ~ label[for="lock"] .switch {margin-left:40px;}

input[type="checkbox"]:checked ~ label[for="lock_one"] .switch {margin-left:40px;}

span[class*="entypo"] {
  color:rgba(0,0,0,0.15);
  float:left;
   font-size:22px;
  line-height:26px;
}
span[class="entypo-lock"] {}
span[class*="open"] {}
input[type="checkbox"]:not(:checked) ~ span[class="entypo-lock"] {
  color:rgba(255, 165, 0,0.65);
  text-shadow:0 0 3px #CFCFCF,
    0 -1px 2px rgba(255, 165, 0,.5),
    0 0 3px #CFCFCF;} 
input[type="checkbox"]:checked ~ span[class*="open"] {
  color:rgba(255, 165, 0,0.65);
  text-shadow:0 0 3px #CFCFCF,
    0 -1px 2px rgba(255, 165, 0,.5),
    0 0 3px #CFCFCF;}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="box">
<input type="checkbox" id="lock" name="lock" checked/>
  <span class="entypo-lock" class="label"></span>
    <label for="lock">
      <div class="switch"></div>
    </label>
  <span class="entypo-lock-open"></span>
</div>

<div class="box">
 <input type="checkbox" id="lock_one" name="lock_one"/>
  <span class="entypo-lock" class="label"></span>
    <label for="lock_one">
      <div class="switch"></div>
    </label>
  <span class="entypo-lock-open"></span>
</div>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-06-25 tarihinde yayınlandı,Toplam 2602 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...