Make Animation use CSS Keyframe or CSS Sprites

Ketika melihat Pen dari master Brandon Lawrence codepen.io/bvbrandon/full/Hvqes AA lalu membuka arsip dan persis dengan salah satu source pada postingan selection good resources may 2014 dengan judul animating images with css keyframes! Sobat dapat mempelajari di halaman www.pencilscoop.com/2014/04/animating-images-with-css-keyframes Salah satu kemajuan yg terjadi pada bahasa CSS! Walau ribet dengan kode-kode dalam pembuatan, akan tetapi hasil tetap memuaskan :) Beberapa skill yg sobat harus kuasai selain CSS tentu photoshop :P

Dalam mengembangkan keahlian dalam per-CSS-an tentu dengan membaca, praktek dan selalu mencoba dengan teknik² sukar alias bertemu dengan kasus :)) Contoh pelajaran CSS tingkat advanced tentang emoticon Source lain dalam membuat emoticon dengan menggunakan image, dipadukan dengan CSS keyframe dan CSS image sprites! Buka halaman berikut guna bertemu dengan CSS image sprite animation skype emoticons.

cssdeck.com/labs/css-image-sprite-animation-skype-emoticons

Untuk mempelajari harus punya source yg berjalan secara offline, silahkan download...

downloads.ziddu.com/download/24088817/Skype-emoticons.zip.html

Kalau sobat mau memasang emot tersebut jangan pasang semua, karena kode yg lumayan bejibun. Pilih saja seperlunya ;) Berikut ilustrasi dan penjelasan...

Buka file Skype emoticons - Melwyn Pawar.htm pada text editor sobat (notepad), kemudian pilih emot yg akan digunakan. Lakukan optimize image terlebih dahulu sebelum dihostingkan. Karena kode tingkat mahir, penulisan syntax image sbb:

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="emoticon CLASS" />

Kode warna merah simpan saja, karena kalau tidak pakai itu akan ada gambar default alt. Saya sudah coba akali tetapi belum menemukan solusi :-?? Ada yg bisa :-"

www.designsave.com/2014/09/free-portfolio-blogger-templates.html

Happy CSS \m/