Kalau sebelumnya masluhur.com membuat tutorial tentang “Cara Membuat Banner Berubah Transparan Saat disorot Mouse” nah kali ini masluhur.com akan membuat tutorial gimana caranya supaya pada banner terdapat efek bayangan, masih seputar memodifikasi banner dengan CSS supaya tampilannya lebih menarik dan otomatis akan mendongkrak kemungkinan diklik semakin besar.
Caranya untuk membuat banner terdapat efek bayangan juga sangat mudah, berikut adalah kode htmlnya:
<style type=”text/css”>
a.bayangan img {
-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 5px rgba(0,0,0,0.4);
}
</style>
<A class=”bayangan” HREF=”Link URL“>
<IMG A BORDER=”0″ SRC=”URL Image“></A>
a.bayangan img {
-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 5px rgba(0,0,0,0.4);
}
</style>
<A class=”bayangan” HREF=”Link URL“>
<IMG A BORDER=”0″ SRC=”URL Image“></A>
Silahkan diedit kode yang berwarna hijau sesuai dengan kebutuhan. Untuk demo bagaimana tampilan banner setelah diberi efek bayangan ini bisa anda lihat langsung di banner-banner yang terdapat di masluhur.com
Semoga bermanfaat.
Postingan
