Dec 12, 2011

Animasi Keren With CSS

Animasi Keren With CSS

Oke, lama tak posting kali ini saya akan posting cara membuat animasi keren dengan CSS. Mungkin trik ini pernah saya gunakan dalam posting sebelumnya. Nah, yang bisa muter jika di sentuh mouse itulah yang saya maksud. Tapi kali ini saya akan posting 2 trik, yaitu ANIMASI MEMUTAR dan MEMBESAR. Untuk DEMOnya bisa kalian temukan di samping. (Tersembunyi. qiqiqi)
Oke langsung saja ke stepnya.

Trik Pertama
Pada trik pertama ini, saya akan berbagi cara membuat Animasi memutar. Sudah lihat Demonya kan? Nah, langsung saja dibawah ini nih kodenya. Untuk membuat seperti demo yang kalian lihat.


CSS (Taruh di atas ]]></b:skin> )

#infotips-muter{
  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;
}

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

Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian. :)
<div id="infotips-muter">
Ganti teks ini dengan teks kalian. :)
<div>
 Trik Kedua
Untuk yang kedua, saya akan berbagi cara membuat Animasi membesar. Langsung saja deh, lihat dibawah. Itu kode untuk membuatnya.

CSS (Taruh di atas ]]></b:skin> )





#infotips-membesar {
  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;
}

#infotips-membesar:hover {
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -o-transform:scale(1.5);
}


Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian. :)

<div id="infotips-membesar">
Ganti teks ini dengan teks kalian. :)
<div>

DONE. SELAMAT MENCOBA.. GOOD LUCK.. :)

DEMO CONTOH PERTAMA
Ganti teks ini dengan teks kalian. :)
DEMO CONTOH KEDUA
Ganti teks ini dengan teks kalian. :)

45 comments:

  1. Ronalda VickoDecember 12, 2011 at 8:02 PM

    keren gan (y)

    ReplyDelete
  2. Ramadhan FnwDecember 12, 2011 at 8:06 PM

    @Ronalda Vicko: thnks gan. :)

    ReplyDelete
  3. IT-Soft CenterDecember 12, 2011 at 8:19 PM

    woow......manteb neh animasinya........izin nyoba gan :)

    ReplyDelete
  4. KangmushDecember 12, 2011 at 8:29 PM

    mantab nhe gan

    ReplyDelete
  5. UnknownDecember 12, 2011 at 9:41 PM

    ajib mas bro dapat ilmu satu lagi ni soal CSS

    ReplyDelete
  6. BlogS of HariyantoDecember 12, 2011 at 11:18 PM

    wow..keren banget tutorialnya sobat :)

    ReplyDelete
  7. DODE-XP.COMDecember 13, 2011 at 5:36 AM

    mantap nih tutornya :)

    ReplyDelete
  8. threex-hans.comDecember 13, 2011 at 8:24 AM

    ikut mencobanya sob,,,

    ReplyDelete
  9. Mbah QopetDecember 13, 2011 at 12:07 PM

    keren masbro , cuma ane kasih saran nih , teks sama background ga kontras , bikin pusing bacanya.hihihi tombol "sebelumnya" punya ane tuh :P

    ReplyDelete
  10. Ramadhan FnwDecember 13, 2011 at 2:32 PM

    @IT-Soft Center: thnks gan. :)

    ReplyDelete
  11. Ramadhan FnwDecember 13, 2011 at 2:33 PM

    @Wong konsel: iya, thnks gan. hehe :)

    ReplyDelete
  12. Ramadhan FnwDecember 13, 2011 at 2:33 PM

    @Admin-Wahid Sahidu: oke, thnks mas bro. ^^

    ReplyDelete
  13. Ramadhan FnwDecember 13, 2011 at 2:33 PM

    @BlogS of Hariyanto: iya sob, thnks :)

    ReplyDelete
  14. Ramadhan FnwDecember 13, 2011 at 2:34 PM

    @DODE-XP.COM: hehe, thnks sob commentnya. ;)

    ReplyDelete
  15. Ramadhan FnwDecember 13, 2011 at 2:34 PM

    @threex-hans.com: silahkn sob, :)

    ReplyDelete
  16. Ramadhan FnwDecember 13, 2011 at 2:35 PM

    @Mbah Qopet: udah saya ganti sob, semoga gk pusing lagi yg baca. hehehe.

    iya, ijin make ya sob. ;)

    ReplyDelete
  17. Mharjipes blogDecember 13, 2011 at 7:19 PM

    Wuiss,, Mantab nigh Gan,, Gatot kaca nigh Floath Imagex Gatot kaca yagh mas?

    ReplyDelete
  18. Musa Khairul UmamDecember 14, 2011 at 12:23 PM

    Keren bang

    ReplyDelete
  19. UnknownDecember 15, 2011 at 12:20 AM

    berkunjung lagi membawa semangat di malam hari

    ReplyDelete
  20. DODE-XP.COMDecember 15, 2011 at 9:54 AM

    jalan2 lagi :D

    ReplyDelete
  21. Rama88December 15, 2011 at 1:10 PM

    wihh ajib gan,, yg naik turun itu yakk,, =)) keren,, =))

    ReplyDelete
  22. ShireishouDecember 15, 2011 at 3:07 PM

    Hihih aku suka yg di klik trus jd gede.... yg kanan. mau dicoba tp ga tau mau ditaruh dimana wehehehe

    ReplyDelete
  23. SintoDecember 15, 2011 at 7:51 PM

    mantap boleh juga nih buat di coba

    ReplyDelete
  24. Ramadhan FnwDecember 16, 2011 at 11:01 AM

    @katils: kyknya egk sob, coz pake CSS

    ReplyDelete
  25. Ramadhan FnwDecember 16, 2011 at 11:01 AM

    @Mharjipes blog: itu background BODY mas, hhehe

    ReplyDelete
  26. Ramadhan FnwDecember 16, 2011 at 11:02 AM

    @Musa Khairul Umam: thnks bang. :)

    ReplyDelete
  27. Ramadhan FnwDecember 16, 2011 at 11:02 AM

    @Admin-Wahid Sahidu: hehe, makasih sob kunjungannya. :)

    ReplyDelete
  28. Ramadhan FnwDecember 16, 2011 at 11:03 AM

    @DODE-XP.COM: thnks bang dode, ;D

    ReplyDelete
  29. Ramadhan FnwDecember 16, 2011 at 11:03 AM

    @Rama88: bukan sob, yg naik turun itu beda lagi. hehe

    ReplyDelete
  30. Ramadhan FnwDecember 16, 2011 at 11:04 AM

    @Shireishou: yg penting jgn taruh di pinggir jalan sob, ntar di ambil org. :D

    ReplyDelete
  31. Ramadhan FnwDecember 16, 2011 at 11:04 AM

    @Zh!nTho: silahkan dicoba sob,, ;)

    ReplyDelete
  32. RIefzDecember 16, 2011 at 11:19 AM

    wihhh mantap nihhh!!

    ReplyDelete
  33. DODE-XP.COMDecember 16, 2011 at 12:25 PM

    demonya dimana ya??

    ReplyDelete
  34. UnknownDecember 16, 2011 at 4:22 PM

    kunjungan di sore hari sembari menunggu tips tips berikutnya

    ReplyDelete
  35. UnknownDecember 16, 2011 at 9:57 PM

    selalu dukung kau sobatku

    ReplyDelete
  36. Ramadhan FnwDecember 17, 2011 at 5:23 AM

    @RIefz: thnks om. :D

    ReplyDelete
  37. Ramadhan FnwDecember 17, 2011 at 5:23 AM

    @DODE-XP.COM: itu gan disamping, yg mini icon silahkan di klik.

    ReplyDelete
  38. Ramadhan FnwDecember 17, 2011 at 5:24 AM

    @Admin-Wahid Sahidu: Thnkss sob, :)

    ReplyDelete
  39. dokunimusDecember 18, 2011 at 2:30 PM

    Sekarang banyak yang blognya makai css design ya...
    kalau ndak salah ini seperti model blogazine ya ?

    ReplyDelete
  40. Ramadhan FnwDecember 20, 2011 at 1:41 PM

    @dokunimus: iya, css memperindah soalnya..

    iya sob, ini tema blogazine. :D

    ReplyDelete
  41. RiefzDecember 23, 2011 at 11:35 AM

    mantappp animasinya!!

    ReplyDelete
  42. Ramadhan FnwDecember 23, 2011 at 6:33 PM

    @Riefz: thnks mas brow. :D

    ReplyDelete
  43. Zero_oneJanuary 29, 2012 at 3:49 PM

    Blog ane d CSS na gx da kata2 ]]>
    trus kod pemanggilnya d letakkan d mna?
    klo bsa kash cntoh sekalian Screenshoot na ya gan..
    sori ane masih newbie

    ReplyDelete
  44. Zero_oneJanuary 29, 2012 at 8:38 PM

    sory gan sbelumnya klo ane copas and gx ngash sumber..
    Inet ane tdi lagi lemot.
    Tar ane kash dah sumberna..
    Tpi ane mnta pnnjelasan yg lbih mendalam lgi tntang gmna carana pke trick d atas. Ane masih gx bsa

    ReplyDelete
  45. Ramadhan FnwFebruary 26, 2012 at 6:21 AM

    @Zero_one lama" juga bisa kok gan. :)

    ReplyDelete

Terima kasih telah berkunjung. Mohon beri komentar jika ada yang kurang.