ping fast  my blog, website, or RSS feed for Free free search engine submission

Jumat, 09 Desember 2011

Cara membuat menu animasi CSS3 di blog

kali ini aku mau posting tentang cara membuat animasi CSS3 di blog.
hasil dari pembuatan menu CSS3 akan tampak seperti gambar disamping.
akan tetapi yang perlu di ingat adalah bahwa tidak semua browser support menu CSS3,
untuk melihat tabel browser mana saja yang support dengan CSS3 bisa dilihat DISINI.

ok langsung aja kita masuk ke tahap cara pembuatan menu animasi CSS3 :
1. login ke blog kamu, pastikan posisi kamu sekarang berada di dasbor
2. klik rancangan, 
3. elemen halaman,
4. tambah gadget/widget,
5. pilih HTML/Javascript
6. masukkan kode di bawah ini



<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://lora-malunk.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>



7. klik simpan, selesai

catatan:
Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
  1. angka 0.5s menandakan waktu perubahan dari animasi
  2. angka 25deg menandakan rotasi perputaran dari area menu
  3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
  4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya.


Tidak ada komentar:

Posting Komentar

Terimakasih saya ucapkan..
karena anda telah memberikan komenter pada artikel ini..
gabung dengan saya di facebook.com >> http://www.facebook.com/ganta.a.tasya
gabung dengan saya di twitter.com >> http://twitter.com/GantaArgaTasya
gabung dengan saya di blorner.com >> http://blorner.com/GATOT12/
gabung dengan saya di Google+.com >> http://plus.google.com/111785983690816699275/posts
gabung dengan saya di digg.com >> http://digg.com/gatots
gabung dengan saya di bloggers.com >> http://bloggers.com/GATOT12
gabung dengan saya di planet-blog.com >> http://www.planet-blog.com/user/6855

Related Posts Plugin for WordPress, Blogger...

 
Design by Gatot Susilo | Bloggerized by Gatot Susilo - Premium Blogger Themes | Best Web Hosting
Facebook Twitter Yahoo! Feeds Myspace