Cara Membuat Link Terlihat Menyala


PERHATIAN!! Efek animasi dibawah ini, hanya terlihat jika kamu menggunakan Google Chrome Atau Safari terbaru.
Ini Adalah Link
Kalau kita lihat blognya Mas Ardianzzz, apa yang paling menonjol?? yups judul yang terlihat menyala jika kita mengarahkan kursor kita ke atasnya. Apalagi kalau kita memakai browser ber-mesin webkit ( halah sok.. biar dibilang pinter ngomong pakai bahasa webkit ) akan terasa sekali efek animasinya. Untuk membuat efek menyala seperti itu kita bisa mengunakan text-shadow. Sebenarnya untuk tutorial membuat text shadow sendiri, pernah di lakukan oleh Bang Hendro di "Membuat Text-shadow dalam postingan (CSS3)" tapi dengan beberapa tambahan kita bisa membuat efek link yang menyala dan ter- animasi seperti punya Mas Ardianzzz. udah g usah banyak kata-kata pembuka, tar palah dikira nge- fluff. langsung aja...
Seperti yang saya sudah sebutkan diatas bahwa efek menyala bisa dilakukan dengan menggunakan text-shadow. Untuk itu mari kita belajar sedikit mengenai text-shadow. "text-shadow adalah cara menambahkan shadow atau bayangan pada sebuah text. Untuk membuat shadow atau bayangan pada sebuah text kita bisa menggunakan kode seperti ini :
text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;
yang artinya kurang lebih seperti ini :
  • text-shadow = buatlah bayangan pada text
  • rgba(255, 150, 220, 1) = Warna dengan komposisi RGB dan Alpha (R, G, B, Alpha). --untuk mencari komposisi warna RGB, kamu bisa menggunakan photoshop--
  • 0 0 8px =       0(ofset x)     0(ofset y)    8px(lebar/blur bayangan)
Dengan dasar text-shadow itulah maka kita bisa membuat link terlihat menyala dengan cara menulis kode css seperti ini :

.link {
     color: #8e8e8e;
     font-family: 'Arial', sans-serif;
     text-shadow: 1px 1px 2px #535353;
}

.link:hover {
     color:#ffda8c;
     text-decoration:none;
     text-shadow:  1px 1px 2px #535353, rgba(251, 233, 194, 0.5) 0px 0px 8px;
    }

dengan menggunakan html seperti ini :

<a class="link" href="#">Ini Adalah Link</a>

maka kita kita akan melihat sebuah link seperti di bawah ini :



Setelah memiliki link yang terlihat glow / menyala, sekarang kita tinggal menambahkan efek animasi. untuk membuat efek animasi dengan menggunakan css3 kita bisa menambahkan kode :
-webkit-transition-duration: 0.7s;

yang artinya = durasi animasi dari satu titik ke titik yang lain (bingung bahasanya) adalah 0.7 detik.

nah nantinya kodenya akan terlihat seperti ini :

.link {
     color: #8e8e8e;
     font-family: 'Arial', sans-serif;
     text-shadow: 1px 1px 2px #535353;
     -webkit-transition-duration: 0.5s;
     }

.link:hover {
     color:#ffda8c;
     text-decoration:none;
     text-shadow:  1px 1px 2px #535353, rgba(251, 233, 194, 0.5) 0px 0px 8px;
    }

maka kita kita akan melihat sebuah link seperti di bawah ini :



Selamat Mencoba, Semoga Bermanfaat...

Untuk berlangganan
Masukan alamat email anda:

Delivered by FeedBurner

  1. permainan rgba, yups mantap sobat..di tunggu sambungannya

  2. Menurut saya link hover yg dihasilkan diatas terlalu mencolok, bikin mata lelah mas. Tapi ini hanya contoh, jadii.. gpp.

    Selamat menunaikan ibadah puasa. Salam kenal ☺

  3. Ha, thanks!
    Sedikit tambahan, saya juga menggunakan animasi untuk webkit.

    Saran saya, satuan pixel lebih baik dikonversi menjadi em

  4. di moz terlihat karena ini text-shadow dengan fungsi hover, hanya moz agak cepat dan chrome dkk agak terlihat lambat dan atraktif..

    -webkit-transition-duration: 0.5s;

    sintaks itulah yang menyebabkan di chrome dan safari bisa penambahan ease, out, ini dan lainnya, di rambah dengan transform di hover dia akan menyatu dan kreasi akan lebih terlihat, timing di transtition bisa menyebabkan animasi yang dasyat di webkit----

  5. mas riky,
    iya mas.. kemaren masih dalam tahap uji coba, jd msh blm fix.. sekarang sudah saya perkecil kok.

    mas ardianzzz,
    maaf pake namanya tp g ijin.. kode yang saya gunakan untuk menulis contoh yang paling atas, saya menggunakan em tapi untuk sesi tutorial saya memilih mengunakan px karena lebih mudah untuk di kontrol...

    Bang Hendro,
    tar dulu bang... masih terbang neh... di kasih komen ma bang hendro untuk masalah css3...

  6. Dengan Efek menyala tampilan link akan terlihat lebih bagus mungkin harus disesuaikan dengan pengaturan waranya saja...

    Info yang menarik terimakasih sudah sharing infonya.

  7. klo punya ardianzzz mah emang keren, klo yang ngikutin bakalan ketularan keren :)

  8. wah,,keren,,, bermanfaat nih,,ijin bookmark ya soabt^^,,oh ya salam knal,,,

  9. wah nice post.... :)

  10. berguna bgt,...
    visit us jg ya... n kasih masukkan...
    http://sigithermawan12.blogspot.com/

  11. keren sob sangat menarik

  12. Bos, pake firefox terbaru juga jalan

  13. terlalu banyak penggunaan efek shadow pun bisa bikin scroll blog terasa agak lambat..

  14. apa ga jadi memperlambat buat buka blog kita masbor?

    salam kenal, baru pertama berkunjung :D

  15. maaf all lama g blogging... sibuk main game..

    @Blognya Achot : begitukah?? ane blm pernah nyoba sih.. tp menurut ane asal kita memakainya cukup, g berlebihan n penempatnaya tepat pasti bakalan membuat blog kita tambah bagus... di jamin deh... scroll blog lamban jg g bakalan bosen orang liat...

    @Mujahid Khairuddin : hihihi pas posting ini di buat ff 4 masih beta kk... jd ane bikin postnya gitu... skrg dah bisa hampir di smua browser kk... hihhiihhihi :D

    @momod : ayolah broooo.. ini jaman koneksi 50kBps bwt sendiri... ini bukan jaman koneksi 30kBps dipakai rame2 di warnet... janganlah kita terjebak di masa lalu dan terus menayakan hal2 yg akan membuat kita terhambat... :peace:

  16. matep jga nih gan, di jajal dulu :)

Posting Komentar