Home » , » Cara Memberi Efek Hover Shadow

Cara Memberi Efek Hover Shadow

Written By ariehariady on 10.24.2010 | 4:06 PM

Cara Memberi Efek Hover Shadow- Akhir akhir ini saya sangat tertarik sekali sama yang namanya efek hover. Memang bagi para blogger dan saya sendiri sudah tau betul yang namanya efek hover..Bagi anda yang belum tau apa yang dinamakan efek hover yaaa.. saya kasih tau.. Hyhyhy. Efek Hover adalah Efek yang
di tunjukkan (bisa apa saja) pada halaman website atau blog cursor kita,kita arahkan ke gambar atau tulisan(atau semacamnya, dll) yang bila mana di klik akan ke halaman yang lain(link lain).. Udah Jelas.. kalo belum, coba baca ini, Dah ngerti?? kalo belum(yang orang jawa) waliken kelambimu...
Disini kita akan mencoba tentang bermacam-macam efek hover yang belakangan ini saya pelajari dan coba.. hasilnya ada yang bagus dan ada yang kurang memuaskan.. Tenang aja saya hanya akan memberi yang sekiranya menyenangkan aja kok!! Sebenarnya Efek Hover itu bila di sungguhi akan menghasilkan sesuatu yang menarik kok.
Taukan yang namanya shadow?? yaa.. shadow adalah bayangan. jadi kita akan membuat efek hover menggunakan efek bayangan(shadow)
Yaaa.. dari pada lama lama kita langsung aja ke intinya
.

Cara Memberi Efek Hover Shadow pada link
taukan yang namanya shadow?? yaa.. shadow adalah bayangan. jadi kita akan membuat efek hover menggunakan efek bayangan(shadow)

1. Cari kode
a:hover {
text-decoration: underline;
color: #ff0000;
}

2.Nah.. Ganti dengan
a:hover {color:#DF0101;
text-decoration:none;
text-shadow:1px 1px 1px #000000}
Saaannngat sangat mudahkan??



Cara Memberi Efek Hover Shadow pada Gambar
Anda juga bisa menambahkan efeknya ke gambar..
1. Cari kode
.post img { padding: 10px; border: 0px }
-setiap blog berbeda beda

2. Bawahnya tambahkan kode
.post img:hover {-moz-box-shadow: 0 0 13px;}

Mudahkan?? Sebenarnya banyak sekali efek-efek hover yang lainnya tetepi berhubung singkatnya waktu saya hanya bisa memberi efek shdow.. jadi sabar ya.. dan update terus blog ini
Share this article :

0 komentar:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kata Ketik - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger