Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: I Love You Css Efekt
D4RKG1RL
*
avatar
Albay
Durum: Çevrimdışı
Seviye Puanı: 23
Yaşam Puanı: 202 / 563
Deneyim: 55 / 100
Rep Sayısı: 308
Mesaj Sayısı: 669
Üyelik Tarihi: 14.08.2013
     
Yorum: #1
I Love You Css Efekt
30.07.2014 14:19
Bir süredir cok fazla online olamıyordum malum okull bitti ufak bir tatik yaptık, şimdi kaldığımız yerden devam..
Sizler için ufak bir calışma yaptım Smile


cyberizm

cyberizm

Css:
Kod:
<div class="wrapper">
  <input type="checkbox" id="ck1"/>
  <label for="ck1">I</label>
  <input type="checkbox" id="ck2"/>
  <label for="ck2">love</label>
  <input type="checkbox" id="ck3"/>
  <label for="ck3">you</label>
</div>

<span>(I love cyberizm)</span>

Html:
Kod:
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

html {
  display: table;
  width: 100%; height: 100%;
  table-layout: fixed;
}

body {
  display: table-cell;
  width: 100%; height: 100%;
  vertical-align: middle;
  font-family: 'Shadows Into Light';
  color: #111;
}

.wrapper {
  width: 500px; height: 500px;
  position: relative;
  margin: 0 auto;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  width: 100px; height: 100px;
  line-height: 100px;
  display: inline-block;
  position: absolute;
  text-align: center;
  font-size: 100px;
  transition: all 1s ease;
}

label {
  text-shadow: 8px 8px 30px rgba(0,0,0,0.5);
}
  label:hover {
    color: #c32a2a;
    cursor: pointer;
  }

#ck1 + label,
#ck2 + label {
  border-radius: 50px;
  top: 0;
}

#ck1:checked + label,
#ck2:checked + label,
#ck3:checked + label {
  background: #c32a2a;
  font-size: 0;
  transition: all 1s ease;
}

#ck1:checked + label,
#ck2:checked + label {
  width: 300px; height: 300px;
  border-radius: 150px;
  line-height: 300px;
}

#ck1 + label {
  left: 0;
}

#ck2 + label {
  right: 0;
}

#ck3 + label {
  bottom: 0; left: 50%;
  margin: 0 -50px;
}
  #ck3:checked + label {
    width: 275px; height: 275px;
    bottom: 96px; left: 162px;
    transform: rotate(45deg);
    line-height: 27px;
  }

span {
  display: inline-block;
  text-align: center;
  position: absolute;
  bottom: 10px; left: 50%;
  margin-left: -100px;
  width: 200px;
  font-size: 24px;
  color: #999;
}
(Bu konu en son: 30.07.2014 Tarihinde, Saat: 14:19 düzenlenmiştir. Düzenleyen: D4RKG1RL.)

cyberizm
Alinti
Rep Verenler: Stallk3r , '[[email protected]]
Stallk3r
*
avatar
Albay
Durum: Çevrimiçi
Seviye Puanı: 33
Yaşam Puanı: 742 / 824
Deneyim: 96 / 100
Rep Sayısı: 419
Mesaj Sayısı: 1611
Üyelik Tarihi: 06.11.2013
     
Yorum: #2
Cvp: I Love You Css Efekt
30.07.2014 14:36
Ellerine sağlık abla Smile

Dans ederken görülenler deli sanılır, Müziği duymayanlar tarafından.
Alinti
#H4CK4L
*
avatar
#R00T
Durum: Çevrimdışı
Seviye Puanı: 42
Yaşam Puanı: 1,048 / 1,048
Deneyim: 95 / 100
Rep Sayısı: 1020
Mesaj Sayısı: 2983
Üyelik Tarihi: 04.05.2013
      
Yorum: #3
Cvp: I Love You Css Efekt
30.07.2014 14:41
eline sağlık fena değil Smile

Çocukken her akşam yatmadan önce Tanrı'ya bana bir bisiklet vermesi için dua ederdim. Bir gün Tanrı'nın çalışma tarzının bu olmadığını anladım. Ertesi gün gittim kendime yeni bir bisiklet çaldım ve her akşam yatmadan önce Tanrı'ya günahlarımı affetmesi için dua ettim.
Alinti
Mr.3xT
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 11
Yaşam Puanı: 25 / 254
Deneyim: 18 / 100
Rep Sayısı: 10
Mesaj Sayısı: 147
Üyelik Tarihi: 26.07.2014
     
Yorum: #4
Cvp: I Love You Css Efekt
30.07.2014 15:02
Bayanın Farkı ya melisa sende olmasan erkek oldugumuzu unutacagız.
Alinti
Hacker Peyami
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 27
Yaşam Puanı: 332 / 664
Deneyim: 56 / 100
Rep Sayısı: 61
Mesaj Sayısı: 963
Üyelik Tarihi: 18.06.2013
      
Yorum: #5
Cvp: I Love You Css Efekt
30.07.2014 15:07
eline sağlık abla
Alinti



1 Ziyaretçi