Berbicara mengenai kemajuan fitur dari CSS3, khususnya CSS3 AnimationsDengan 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
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
CSS3konon 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
Ramuan CSS3
<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
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