November 25, 2010  

BORDER DENGAN EFEK HOVER

Hover adalah Perubahan Ketika Mouse di Arahkan Pada Konten yang di Beri Efek Hover. Selain Membuat Link dan Teks dengan Efek Hover, Kita Dap...

Hover adalah Perubahan Ketika Mouse di Arahkan Pada Konten yang di Beri Efek Hover. Selain Membuat Link dan Teks dengan Efek Hover, Kita Dapat Membuat Border Dengan Efek Hover. Demonya: Arahkan Kursormu Pada Kotak dan Teks di Bawah...

Sebuah Teks dengan Efek Hover

Kode Scriptnya Membuatnya Adalah

<style type="text/css">
#tridi:hover .teri, #tridi.hover_effect .teri {Kode Script Bordermu Sebelum di Hover; Kode Sript Efek Tulisanmu Sebelum di Hover; font-size: 28px;}
</style>
<style type="text/css">
#tridi .teri, #tridi .teri {Kode Script Bordermu Setelah di Hover; Kode Sript Efek Tulisanmu Setelah di Hover; font-size: 28px;}
</style>
<div id="tridi">
<div class="teri" id="tridi">
<div class="left">TULISANMU</div>
</div>
</div>

Belum Ngerti dengan Script Contoh di Atas?
Sebagai Contoh, Copy dan Pastekan Kode Script di Bawah Ini:

<style type="text/css">
#tridi:hover .teri, #tridi.hover_effect .teri {border: 5px inset yellow; text-shadow: -1px 1px #005588, -2px 2px #005588, -3px 3px #005588, -4px 4px #005588, -5px 5px #005588; font-size: 28px;}
</style></div>
<div style="color: black; font-family: Arial,Helvetica,sans-serif;">
<style type="text/css">
#tridi .teri, #tridi .teri {border: 5px solid #696969; text-shadow: 1px 1px #005588, 2px 2px #005588, 3px 3px #005588, 4px 4px #005588, 5px 5px #005588; font-size: 28px;}
</style></div>
<div id="tridi" style="color: black; font-family: Arial,Helvetica,sans-serif;">
<div class="teri" id="tridi">
<div class="left">
<b>Sebuah Teks dan Border dengan Efek Hover</b></div>
</div>
</div>

Semoga Bermanfaat Ya...