Animasi CSS Super Keren 2013 (menu horizontal)

Membuat navigasi horizontal yang penuh animasi mememang sangat menyenangkan. Yuk kita langsung saja nikmati sensasinya.

demo silahkan masuk DISINI lihat bagian atas sendiri

Langsung saja tutorilnya kita simak sob.....
Silahkan ambil kode CSS animasi dibawah ini dan letakkan diatas ]]></b:skin> lalu save template

<br /> .GRsuperAnima{<br /> position:relative;<br /> margin:15px 0 0 10px;<br /> overflow:hidden; <br /> margin:0; <br /> float:left;<br /> padding:0;<br /> background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);<br /> }<br /> ul#superAnima{ <br /> width:599px;<br /> margin:10px 0 20px; <br /> padding:0; <br /> margin:3px 4px 3px 4px;<br /> clear:both;<br /> float:left;<br /> }<br /> ul#superAnima li{<br /> margin:0; <br /> padding:0; <br /> overflow:hidden; <br /> float:left; <br /> height:40px; <br /> }<br /> ul#superAnima li a.anima{<br /> padding:10px 10px;<br /> font:10px Arial; <br /> float:left; <br /> color:white;<br /> text-decoration:none;<br /> text-transform:uppercase;<br /> text-shadow:1px 1px 1px #000;<br /> clear:both;<br /> height:18px;<br /> line-height:20px; <br /> background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x; <br /> text-align:center;<br /> transition:all 1.2s ease-in-out;<br /> -o-transition:all 1.2s ease-in-out;<br /> -moz-transition:all 1.2s ease-in-out;<br /> -webkit-transition:all 1.2s ease-in-out; <br /> -ms-transition:all 1.2s ease-in-out; <br /> font-weight:bold; <br /> border:1px solid #999;<br /> } <br /> ul#superAnima li a.anima:hover{<br /> transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px); <br /> -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> } <br /> ul#superAnima li a.anima span{<br /> padding:10px 9px; <br /> color:transparent; <br /> opacity:0.2;<br /> filter:alpha(opacity=20);<br /> border:2px solid transparent;<br /> transition:all 1.6s ease-out;<br /> -o-transition:all 1.6s ease-out; <br /> -moz-transition:all 1.6s ease-out;<br /> -webkit-transition:all 1.6s ease-out; <br /> -ms-transition:all 1.6s ease-out; <br /> transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -o-transform:scale(8.0) rotate(0deg) translate(0,-10px); <br /> -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> } <br /> ul#superAnima li a.anima span:hover{ <br /> opacity:1.0;<br /> filter:alpha(opacity=100);<br /> padding:4px 9px; <br /> height:18px;<br /> transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -o-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -moz-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -ms-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> color:#FF0; <br /> border:2px solid #000;<br /> background:#555; <br /> text-shadow:1px 1px 1px #000;<br /> box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;<br /> border-radius:4px; <br /> }<br /> ul#superAnima li{<br /> border:1px solid transparent;<br /> background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);<br /> } <br /> ul#superAnima li:hover{ <br /> background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif); <br /> border:1px solid #777;<br /> }<br />

Kemudian ambil pemanggilnya dibawah ini silahkan ditaruh dimana aja, sesuai kesukaan sobat semua
<br /> <div class="GRsuperAnima"> <br /> <ul id="superAnima"> <li><a class="anima" href="#">Tutorial BloGGeR<br /> <br /> <span>Tutorial BloGGeR</span></a></li> <li><a class="anima" href="#">Home<br /> <br /> <span>Home</span></a></li> <li><a class="anima" href="#">jQuery<br /> <br /> <span>jQuery</span></a></li> <li><a class="anima" href="#">CSS3<br /> <br /> <span>CSS3</span></a></li> <li><a class="anima" href="#">Adobe<br /> <br /> <span>Adobe</span></a></li> <li><a class="anima" href="#">Image Gallery<br /> <br /> <span>Image Gallery</span></a></li> </ul> <br /> </div> <br />

Sekarang tinggal sobat kreasikan warna dan lain sebagainnya, sekian dan semoga postingan ini bermanfaat untuk sobat semua. amiinn

CSS Animasi

Membuat Animasi Menu Dengan CSS

Menu animasi ini jauh dari bersifat program js/ javascript dan tidak menggunakan penyimpanan kode kecuali di blogger sendiri sehingga tidak memberatkan blog sama sekali. Menu Animasi dibuat dengan kode CSS dan HTML, hanya saja kemungkinan beberapa browser lama belum mendukung. Animasi menu ini sudah di uji dan bekerja normal di browser terbaru Mozilla Firefox dan Google Chrome.

Untuk lebih bagusnya silahkan diganti latarnya dengan gambar kesukaan, boleh jpg, png, ataupun gif. cuma yang harus diperhatikan adalah ukuran gambar/Kb nya jangan terlalu besar agar tidak menghabiskan bandwith maupun memberatkan blog sobat nantinya. lihat demo dibawah.

DEMO

OK, berikut adalah langkah-langkah membuat menu animasi dengan CSS.

1. Sebaiknya back-up dulu tempate blog sebagai cadangan jika terjadi error.
2. Salin salah kode CSS di bawah kemudian simpan bersama-sama dengan kode CSS yang lain (pada Blogspot biasanya disimpan di atas tetapi kode ]]></b:skin (<style type="text/css> dan </style>)  di bawah dihapus (tidak perlu dikopikan). Kode CSS dapat juga disimpan di bagian Widget blog dengan cara Add Gadgate, atau diletakan pada posting pada mode HTML (bukan pada mode Compose). Untuk kedua opsi terakhir kode <style type="text/css> dan </style> harus ikut dikopikan.
3. Salin kode HTML di bawah dan tempatkan sesuai kebutuhan, misalnya pada widget atau pada posting.
4. Ganti Home, About, Contact, Downloas, dan Privacy beserta URL masing-masing sesuai link yang besangkutan
5. Simpan dan publikasikan/ terbitkan.
6. Selesai
7. Silahkan masukkan komentar

Menu Animasi Berputar dan Membesar silahkan pilih salah satu di bawah ini

 CSS nya

 <style type="text/css">

#mode-putar{
  width:140px;
  height:80px;
  border:1px solid #999;
  box-shadow: 5px 3px 5px #aaa;
  margin:5px auto;
  padding:5px;
  background:#9bbddd;
  font-size:12px;
  font-weight:bold;
  background-color: yellow;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
}

#mode-putar:hover {
  -webkit-transform: rotate(360deg) scale(1.5);
  -moz-transform: rotate(360deg) scale(1.5);
  -o-transform: rotate(360deg) scale(1.5);
}

</style>

 Kode HTMLnya

<div id="mode-putar">
  <a href="URL Home">HOME</a>
  <a href="URL About">ABOUT</a>
  <a href="URL Contact">CONTACT</a>
  <a href="URL DOwnload">DOWNLOAD</a>
  <a href="URL Privacy">PRIVACY</a>
</div>

  CSS nya

<style type="text/css">

#mode-maju {
  width:140px;
  height:100px;
  border:1px solid #999;
  box-shadow: 5px 3px 5px #aaa;
  margin:5px auto;
  padding:5px;
  background:#9bbddd;
  font-size:12px;
  font-weight:bold;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#mode-maju:hover {
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -o-transform:scale(1.5);
}

</style>

Kode HTMLnya

<div id="mode-maju">
  <a href="URL Home">HOME</a>
  <a href="URL About">ABOUT</a>
  <a href="URL Contact">CONTACT</a>
  <a href="URL Download">DOWNLOAD</a>
  <a href="URL Privacy">PRIVACY</a>
</div>

Demikian sobat tutorial membuat animasi menu dengan css, semoga bermanfaat. bisa diletakkan di posting maupun gadget sobat. Selamat mencoba.

CSS Animasi

Membuat Animasi Css Profil Blogger

Selamat malam sobat, belajar CSS Animasi memang perlu ketelatenan dan ke uletan. maka dari tiu saya tidak cepat bisa, soalnya masih newbie. Tapi tak apalah sedikit demi sedikit lama-lama menjadi bukit. Animasi Css Profil Blog ini merupakan salah satu dari sekian banyak efek animasi menggunakan CSS. Animasi ini akan membuat efek yang menarik saat kursor menyentuhnya. Untuk demoya silahkan Lihat profil saya yang ada di home page. Nah bagaimana cara membuat animasi css profil blog? langsung saja kita praktekkan sobat :

1. Login ke Akun Blogger sobat masing-masing.

2. Klik Design or Rancangan, kemudian pilih Edit HTML

3. Centang (Expand Widget Template)

4. Untuk keamanan lebih baik kita (Download Template Lengkap)

5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian

6. Cari kode : ]]></b:skin>

7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
border: 8px solid #aaa;
opacity: 0.3;
border-radius: 6px;
margin: 20px 0 20px 60px;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
opacity: 1.0;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

8. Save

9. Selamat mencoba

Ada cara untuk modifikasi link dengan animasi css, silahkan kunjungi artikel cara buat animasi link dengan css.

Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.

CSS Animasi , Tutorial

Animasi Link (Dengan) Flash CSS

Selamat malam sobat, sebenarnya saya ini lagi belajar css animation tapi gak bisa-bisa... nih saya akan share sebuah modifikasi tampilan link yang bisa sobat tulis pada postingan atau terserah. Ini merupakan style link animasi menggunakan CSS dan tidak menggunakan javascript. Artinya, tidak akan memberatkan blog sobat.
Tidak usah panjang lebar langsung aja sob...

Nih markup HTMLnya

<embed allowscriptaccess="always" bgcolor="#252424" flashvars="hicolor= 0xffffff&amp;tcolor=0xF3A217&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;a href='http://trimudareog.blogspot.com/' style='24'&gt;Cah Ngebel&lt;/a&gt;
&lt;/tags&gt;" height="150" id="tagcloud" name="tagcloud" quality="high" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" type="application/x-shockwave-flash" width="350"></embed>

Sedangkan contohnya seperti dibawah ini:






Silahkan sobat sesuaikan dengan warna yang disukai... selamat berkarya. semoga bermanfaat.

CSS Animasi