Rabu, 24 Oktober 2012

Decorate Your Blog with CSS3 Animation

Berbicara mengenai kemajuan fitur dari CSS3, khususnya CSS3 Animations Dengan variable coded baru yang mana memungkinkan sesuatu yang dahulu tidak dapat dibuat menjadi bisa terealisasikan untuk saat ini. (Syarat mutlak browsingan sudah harus mendukung var. CSS3) Artikel 47 Amazing CSS3 Animation Demos merupakan contoh dari beberapa kreasi coderer dari bahasa CSS versi 3.
Dengan bermunculan karya² fitur CSS 3 full stylish menjadikan aneka ragam pilihan bagi kita sebagai penikmat hasil jadi :D Malah dibuat pusing dengan berlimpahnya karya para master CSS v.3 ini ;)) Kebelinger juga dibuatnya mana yg cocok diterapkan ke dalam blog kita! Tak kalah penting patut di ketahui dengan hadirnya variabel CSS3 konon dapat menggantikan/membuat beberapa konten setara level content basic flash!

Berawal dari menclok di 84Colors sobat dapat melihat di bagian kiri, atas, dan gambar tupai pada konten! Itu dibikin dengan format SWF Tools pendukung berikut Animation Fill Code & Prefixr Extra tools: Prefixfree Script dapat merubah kreasi swf yg seperti itu hanya dengan menggunakan attribute variable CSS3.
Cari kode </b:skin> pada template blog kalian, masukan ramuan berikut tepat diatas/sebelumnya.

Ramuan CSS3

Markup HTML

<div style="clear:both;">
<img src="leaf-1.png" alt="" width="50" height="84" class="deco B-1" />
<img src="leaf-2.png" alt="" width="82" height="69" class="deco B-2" />
<img src="leaf-3.png" alt="" width="23" height="25" class="deco B-3" />
<img src="leaf-4.png" alt="" width="91" height="95" class="deco B-4" />

<div id="B-kiri">
<img src="flower-side.png" alt="" width="75" height="98" class="deco flower" />
<img src="leaves-side.png" alt="" width="140" height="167" class="deco leavesside1" />
<img src="leaves-side-2.png" alt="" width="98" height="167" class="deco leavesside2" />
<img src="leaves-side-3.png" alt="" width="57" height="78" class="deco leavesside3" />
</div>
</div>

Kode HTML sobat masukan di dalam tagging <div id='outer-wrapper'> bisa wrapper atau apapun pokoknya di dalam awal kode tag setelah kode <body> template masing²
Isikan image .png yg berada di <div id="B-kiri"> download image. Save, lihat hasil kerja :) Begitulah tutor menghias blog dengan daun bergerak-gerak layaknya flash :D Good luck!
Resource by: http://www.impressivewebs.com/replace-flash-with-css3-animation/
BONUS:
http://tutorialzine.com/2012/10/css3-dropdown-menu/
Happy coding \m/

Tidak ada komentar:

Posting Komentar