◄ Min  Size Fonts: + | - | ± Color: Max ►

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/

Loading...
XMake Animation use CSS Keyframe or CSS Sprites
Membuat gambar animasi menggunakan CSS Keyframe atau CSS Sprite.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE