lostyazilim
tr.link

ios buton

8 Mesajlar 1.124 Okunma
acebozum
tr.link

muhammetdkaya muhammetdkaya WM Aracı Kullanıcı
  • Üyelik 11.04.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad M** D**
  • Mesajlar 638
  • Beğeniler 146 / 136
  • Ticaret 4, (%100)
arkadaşlar elimdeki örnek kodu ios buton tarzına dönüştürmek istiyorum ancak beceremedim yardımcı olur musunuz ?



örnek: https://codepen.io/TazTheManiac/pen/rGrpMg
 

 

elektronikssl
webimgo

muhammetdkaya muhammetdkaya WM Aracı Kullanıcı
  • Üyelik 11.04.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad M** D**
  • Mesajlar 638
  • Beğeniler 146 / 136
  • Ticaret 4, (%100)
TEHET
 

 

Mango Mango WM Aracı Kullanıcı
  • Üyelik 23.11.2015
  • Yaş/Cinsiyet 30 / E
  • Meslek Front-End Developer
  • Konum Bursa
  • Ad Soyad N** K**
  • Mesajlar 311
  • Beğeniler 8 / 81
  • Ticaret 0, (%0)
Linkteki kodları kullanarak yapabilirsiniz, tam olarak neyi beceremediniz?

HTML:

iOS Styled Toggle Switch



CSS:

.form-switch {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
transform: translate3d(16px, 2px, 0);
}
.form-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-switch input:checked + i {
background-color: #4BD763;
}
.form-switch input:checked + i::before {
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
transform: translate3d(22px, 2px, 0);
}

 

 

muhammetdkaya muhammetdkaya WM Aracı Kullanıcı
  • Üyelik 11.04.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad M** D**
  • Mesajlar 638
  • Beğeniler 146 / 136
  • Ticaret 4, (%100)
Mango hocam benim html koduma uyarlamam gerekiyor.
 

 

wmaraci
wmaraci

Mango Mango WM Aracı Kullanıcı
  • Üyelik 23.11.2015
  • Yaş/Cinsiyet 30 / E
  • Meslek Front-End Developer
  • Konum Bursa
  • Ad Soyad N** K**
  • Mesajlar 311
  • Beğeniler 8 / 81
  • Ticaret 0, (%0)
Class'ı form-switch olan bir label oluşturun ve içerisine checkbox input ile etiketi yerleştirin. Sonra css kodlarını aynen kopyalayıp kendi css dosyanıza yapıştırın. Bu kadar.
 

 

muhammetdkaya muhammetdkaya WM Aracı Kullanıcı
  • Üyelik 11.04.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad M** D**
  • Mesajlar 638
  • Beğeniler 146 / 136
  • Ticaret 4, (%100)
Mango hocam onu yapamıyorum işte tema her güncellemede gider.
 

 

TEHET TEHET Kullanıcı
  • Üyelik 04.10.2014
  • Yaş/Cinsiyet 32 / E
  • Meslek Tasarımcı
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 791
  • Beğeniler 96 / 374
  • Ticaret 1, (%100)
qBbWNPg
https://codepen.io/tehet/pen/qBbWNPg
muhammetdkaya

kişi bu mesajı beğendi.

muhammetdkaya muhammetdkaya WM Aracı Kullanıcı
  • Üyelik 11.04.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad M** D**
  • Mesajlar 638
  • Beğeniler 146 / 136
  • Ticaret 4, (%100)
TEHET hocam çok teşekkür ederim iyiki etiketlemişim sizi :)
TEHET

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)