Hover Link Pelangi: Cara Buat dan Pasang Rainbow Link Effects

Karena desain hover link CSS mempunyai banyak keterbatasan, maka untuk mendapatkan hover link yang lebih menarik dan atraktif banyak diciptakan hover link dalam bentuk script dengan menggunakan javascript. Kelemahan mendasar penggunaan hover link menggunakan javascript adalah dalam hal kompabilitinya, dimana tidak semua javascript yang digunakan kompatibel dengan browser yang ada. Salah satu Hover link yang begitu terkenal dilingkungan blogger adalah "Hover Link Pelangi" atau "Rainbow Hover Link" yang diciptakan oleh TAKANASHI Mizuki.

Hover Link

Hover link dikenal sebagai perubahan yang tampak ketika sebuah link tersentuh cursor. Meskipun hover yang paling sering digunakan dan dijumpai hanya berupa perubahan warna pada teks link, sebenarnya berbagai macam bentuk hover link bisa kita tampilkan dengan cara merubah KODE CSS hover. Perubahan yang umumnya dilakukan terhadap hover adalah :

color	warna link
font-size	ukuran font
background	latar belakang/background link
font-family	jenis huruf/font
text-decoration	dekorasi link
font-weight	ketebalan huruf
border	garis tepi
cursor	bentuk tampilan cursor
opacity	transparansi

color :

a:hover {
      color: green;
}

font-size :

a:hover {
      font-size: 120%;
}

background :

a:hover {
      background: #66ff66;
}

font-family :

a:hover {
      font-family: Tahoma;
}

text-decoration :

a:hover {
      text-decoration: underline;
}

font-weight :

a:hover {
      font-weight:900;
}

border :

a:hover {
      border: 8px ridge #9933FF;
}

cursor :

a:hover {
      border: 8px ridge #9933FF;
}

opacity :

a:hover {
      opacity:0.85;
      filter:alpha(opacity=85); /* IE  */
}

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «