Bermain Kode CSS3 Yuk!!!

Seru tapi membuat kepala pusing. Praktek ria dengan kode² CSS3 ternyata bisa anteung sampai lupa segala :P Awalnya tidak ada bahan untuk memosting! Tidak sengaja melihat ada trik aneh, langsung deh buka² arsip postingan :D 45+ CSS trick must be known Koben tertuju langsung pada web CSS play by Stu Nicholls. Kenapa saya tertuju ke sana!!!
Coba sobat sekalian buka halaman berikut CSS demonstrations by CSSPlay. Apa yg tidak ada di sana? Para developer, codeer, scripter berlomba-lomba berkreasi dalam menciptakan apa² yg dahulu tidak bisa dilakukan oleh CSS agar menjadi bisa ^:)^ Ketagihan bermain code CSS 3 karena memang ada sarananya sob ;)) Tidak takut salah, rubah ini, rubah itu melihat apa yg terjadi, pelajari dengan seksama...ooo ternyata gini toh :))

Berikut tools bermain CSS3

• HTML EDITOR.
• MBT Beben HTML EDITOR.

Sekarang coba masukan bumbu image hover with bouncing effect using CSS3 berikut pada kotak sebelah kiri tools bantu di ikuti memencet tombol preview.

<style type="text/css">
.gede {
width: 96px;
height: 64px
}
.step1 {
margin: 0;
width: 96px;
height: 64px;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.step2 {
width:100%;margin: 0;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.gede img {width: 100%}
.gede:hover {z-index: 100;}
.gede:hover .step1 {
width: 399px; height: 600px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.gede:hover .step2 {width: 80%; height: 80%;
-webkit-transition: 0.15s 0.3s;
-moz-transition: 0.15s 0.3s;
-ms-transition: 0.15s 0.3s;
-o-transition: 0.15s 0.3s;
transition: 0.15s 0.3s;
}
</style>

<div class="gede">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoyp_UrvxH1iwGYymzSCQNrxn8rM6xvnUYSzL9McTzgGVm1K4DuslnCnsaeM5tunDFnu-xoqiK6h7sNE-q2SSDGgoCoa-HHVW_BowmrrdmluXvOzkwBzHG4sKzm6PoEWEvM76zQPczK0c/s1600/beben.jpg" alt="" />
</div>
</div>
</div>

Sekarang coba hover gambar berikut!!!

Code fancy responsive image-on-hover by http://pehaa.com/2012/02/create-a-fancy-responsive-image-on-hover-effect/
Silahkan di explore kode² lainnya di CSSPlay. Bermain CSS memang capek :P Koben sudah buat ini ;)) :"> about me.
Happy CSS \m/