Animasi warna dengan CSS3 dan PNG

Tidak usah basa-basi lagi,
Langasung aje yee :D

GAMBAR PNG (bolong tengah'e)	SETELAH DI LEGALISIR,,,HA
#udud-dulu { width:300px; height:300px; } #udud-dulu img{ background: red; -moz-animation: super-rainbow 5s infinite alternate linear; -webkit-animation: super-rainbow 5s infinite alternate linear; -o-animation: super-rainbow 5s infinite alternate linear; } @-moz-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } @-webkit-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } @-o-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } #udud-dulu img:nth-of-type(2) { -moz-animation-delay: 1s; } #udud-dulu img:nth-of-type(3) { -moz-animation-delay: 2s; } #udud-dulu img:nth-of-type(4) { -moz-animation-delay: 3s; } #udud-dulu img:nth-of-type(2) { -webkit-animation-delay: 1s; } #udud-dulu img:nth-of-type(3) { -webkit-animation-delay: 2s; } #udud-dulu img:nth-of-type(4) { -webkit-animation-delay: 3s; } #udud-dulu img:nth-of-type(2) { -o-animation-delay: 1s; } #udud-dulu img:nth-of-type(3) { -o-animation-delay: 2s; } #udud-dulu img:nth-of-type(4) { -o-animation-delay: 3s; }	<div id="udud-dulu"> <img src="http://i48.tinypic.com/e13zww.png"> <img src="http://i48.tinypic.com/e13zww.png"> <img src="http://i48.tinypic.com/e13zww.png"> <img src="http://i48.tinypic.com/e13zww.png"> </div>    Note:  (-moz-) for mozila             (-webkit-) for gchrome & safari             (-o-) for opera              (width & height) sesuaikan ukuran gambar

READ MORE >>

Slide Animasi 2 Gambar dengan CSS

Langsung aje ye sob, pada kali ini ane mau ngShare tentang membuat Slide Animasi 2 Gambar dengan CSS
cekidot gaan :D

GAMBAR ASLI	SETELAH DI MODIP DIKIT
#Lezhomey { background: url('http://i46.tinypic.com/v5jxq9.png') no-repeat scroll center top transparent; height: 210px; margin-top: -39px; width: 250px;height: 250px; } #Lezhomey:hover { background: url('http://i46.tinypic.com/v5jxq9.png') no-repeat scroll center bottom transparent; margin-top: -26px; -moz-transition-duration: 1s;width: 250px;height: 250px; }	<div id="Lezhomey"> Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>

      Note:  tulisan merah bisa anda
           imajinasikan sendiri

READ MORE >>

My Name With CSS

Welcome

To

Lezhomey

READ MORE >>

Membuat Menu with CSS Tab Designer

CSS Tab Designer adalah tool yang sangat unik gan, karena dengan menggunakan tools ini kita bisa membuat menu dengan sangat-sangat mudah...
di CSS Tab Designer kita bisa memilih design menu yang ada di CSS Tab Designer kemudian tinggal copy paste source code yang ada di CSS Tab Designer ke Blog anda....
yang belum punya CSS Tab Designer,Anda bisa download disini

semoga bermanfaat

READ MORE >>