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>

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla