NEWS
Loading...
  • Posted by : Johanes Djogan 22 Des 2010

    Membuat Link hover warna - warni dengan CSS3
    Mungkin sobat sudah pernah melihat atau menggunakan trik ini menggunakan javascript dan jquery yang membuat link jadi berkedip warna - warni,tetapi trik menggunakan javasript itu bisa membuat blog kita berat
    ,bahkan jadi hang...nah,disini saya akan kasih tau gimana cara'a membuat kostum link hover dengan pilihan warna yang bisa kita atur sendiri menggunakan KEYFRAME CSS3.trik ini sangat mudah digunakan,dan tidak akan memberatkan blog sobat karena penggunaan css'a tidak terlalu banyak.


    untuk contoh'a bisa sobat lihat dan rasakan di blog ini,tpi harus menggunakan browser yang mendukung CSS3 ya..sayang'a mozila firefox belum mendukung TT..TT
    sobat coba menggunakan google chrome deh..
    langsung aja saya kasih tutorial'a nih n_n

    Pertama,buka blog sobat
    buka Rancangan => edit HTML

    lalu masukan css dibawah ini di template sobat.

    a:hover {
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    }
    @-webkit-keyframes pulsate {
    0% { background-color:#DEDEDE;}
    5% { background-color:#109F9D;}
    10% { background-color:#B19FD9;}
    15% { background-color:#D600AF;}
    20% { background-color:#E9E32E;}
    40% { background-color:#38374A; }
    45% { background-color:#711943; }
    50% { background-color:#3FFFF5; }
    55% { background-color:#1F67C5; }
    60% { background-color:#6541B3; }
    80% { background-color:#45002D; }
    90% { background-color:#109F9D; }
    100% { background-color:#DEDEDE; }
    }

    Keterangan1:
    kode "a:hover" bisa sobat ganti ke elemen yang sobat atur sendiri bagian mana yang akan diberi efek hover.

    CONTOH:

    #header a

    kita tambahkan efek hover menjadi

    #header a:hover {...}

    intinya,kita tinggal menambahkan kode" :hover " pada css yang kita inginkan.


    sedangkan kode "a" adalah bagian tulisan/link.

    Keterangan2:
    "-webkit-animation-name: pulsate;" adalah css nama animasi yang terhubung/terikat ke kode "@-webkit-keyframes pulsate"

    nama animasi harus sama,"pulsate"
    tetapi bisa sobat ganti dengan nama sobat sendiri n_n


    "-webkit-animation-duration: 3s;"
    adalah durasi animasi

    "-webkit-animation-timing-function: ease-in-out;"
    adalah fungsi dari animasi ini


    Keterangan3
    0% sampai 100% adalah proses animasi dari pertama sampai akhir animasi,tiap perses/proses'a bisa kita atur efect'a di tiap frame.
    bisa dari 0% sampai 100% atau lebih,tergantung banyak'a animasi yang kita tambahkan.

    color:#DEDEDE; adalah kode warna Hexadesimal link/tulisan
    background-color:#DEDEDE adalah kode untuk warna background,
    atau bisa disingkat menjadi background saja.



    MODIFIKASI:

    Kode diatas tadi hanya merubah warna pada background link,jadi...
    bagaimana dengan link'a?ini dia trik'a....

    "background-color:#DEDEDE;" sperti yang kita tahu,background-color adalah kode css yang biasa digunakan untuk mengganti warna background,atau bisa disingkat menjadi background:#kodewarna;
    untuk merubah warna link'a,kita tinggal menambahkan "color:#kode warna;"
    jadi tinggal hapus aja warna'a seperti contoh di bawah ini.


    @-webkit-keyframes pulsate {
    0% { color:#DEDEDE;}
    5% { color:#109F9D;}
    10% { color:#B19FD9;}
    15% { color:#D600AF;}
    20% { color:#E9E32E;}
    40% { color:#38374A; }
    45% { color:#711943; }
    50% { color:#3FFFF5; }
    55% { color:#1F67C5; }
    60% { color:#6541B3; }
    80% { color:#45002D; }
    90% { color:#109F9D; }
    100% { color:#DEDEDE; }
    }

    bila kita ingin menambahkan efek kedua'a/background dan warna,tinggal dimasukan kedua css'a jadi seperti dibawah ini.


    @-webkit-keyframes pulsate {
    0% { background:#ffffff;color:#DEDEDE;}
    5% { background:#000000;color:#109F9D;}
    10% { background:#ffffff;color:#B19FD9;}
    15% { background:#000000;color:#D600AF;}
    20% { background:#ffffff;color:#E9E32E;}
    40% { background:#2b2b2b;color:#38374A; }
    45% { background:#ffffff;color:#711943; }
    50% { background:#2b2b2b;color:#3FFFF5; }
    55% { background:#ffffff;color:#1F67C5; }
    60% { background:#2b2b2b;color:#6541B3; }
    80% { background:#ffffff;color:#45002D; }
    90% { background:#2b2bb;color:#109F9D; }
    100% { background:#ffffff;color:#DEDEDE; }
    }


    ada satu lagi nih...
    ingin tambahkan efek campuran "bold,italic,underline,font-family,font-size,shadow dan border"?
    hahahaha,pusing dah ngeliat'a =,="
    bisa kq,tinggal ditambahkan aja css'a

    Setelah itu,buka blog sobat dan lihat hasilnya n_n

    Selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n

    { 19 comments... read them below or Comment }

    1. Kunjungan pagi sobat.....ditunggu kunjungan baliknya yaw....

      BalasHapus
    2. Saya senang bang johannes bisa berbagi, tapi sayang aku pakai blog detik.

      BalasHapus
    3. walah... pusing dah...haha

      btw, apus aja tuh joh, komen si Software News...
      out of topic, SPAM

      BalasHapus
    4. salam sahabat
      bagus membuat link hover warna warni dengan css ini lebih praktis makasih ya

      BalasHapus
    5. greeting for you
      langsung bookmark aja wes membuat links hover warna warni ini

      BalasHapus
    6. kayaknya menarik nihh gannn..
      perrrrrrrrrlu di coba ke TKP...
      mksi buat tutorialnya..

      BalasHapus
    7. Menarik nih, coba dlu ah.
      Thanks sob artikelnya.

      BalasHapus
    8. keren nih.. bukmak dolo deh


      www.zegitiga.co.cc

      BalasHapus
    9. ane coba berhasil gan.thanks ilmunya

      BalasHapus
    10. sama-sama,thanks ya ^^
      silakan dicoba gan.

      BalasHapus
    11. kalo ingin repeat gimana gan?
      time 3s ka cuma selama 3 detik aja si animasi nya
      ane mau nya terus2 an gimana gan?

      BalasHapus
    12. Nah kalau menurut saya mas kalau untuk mozzila mungkin itu pake kode untuk mozila contoh di atas itu adalah -webkit- nah kalau untuk mozzila adalah -moz- mungkin ini akan support untuk mozzila

      BalasHapus
    13. @Donsteraiya,thx dah diingetin,postingan ini udah lama bgt,coz dlu blom bisa buat mozilla,tp skrg udah bisa,maklum lg males update post ==v

      BalasHapus
    14. tutorialnya mantep banget...
      jadi ngerti dah..
      blognya kakak keren abis
      bikin betah saja disini

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -