Membuat Box Shadow image dalam CSS3 ini adalah bagaimana membuat sebuah gambar yang ketika kita sorot mouse maka gambar itu akan menjadi berbayang atau dengan bahasa blognya hover.Box Shadow Hover Image dengan CSS3 untuk mempercantik gambar yang ada di postingan kita, jadi gambar yang dipostingan kita tidak terlihat polos.
Yang kita butuhkan hanya Box Shadow (bayangan) dengan Border Radius (sudut lengkung). ingat juga untuk memperhatikan lebar atau panjang box yang akan kita buat, jangan sampai melebihi batas margin dan padding dari mainwrapper atau halaman postingan kita. ikuti tutorial dibawah ini gan :
1.Masuk dulu di Edit HTML
2.Cari kode ini ]]></b:skin>
3.Letakan kode berikut tepat diatas nya
.Boxingg {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
border: 2px inset #ff0000;
}
a:hover img.Boxingg {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
border: 2px inset #ff0000;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-radius-top-left:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-webkit-border-radius-bottom-right:20px;
-moz-box-shadow: 0px 0px 12px #00ffff;
-webkit-box-shadow: 0px 0px 12px #00ffff;
box-shadow: 0px 0px 12px #00ffff;
}
Sebenarnya kita hanya memerlukan kode ini :
-moz-box-shadow: 0px 0px 12px #00ffff;Dengan penambahan border radius nya :
-webkit-box-shadow: 0px 0px 12px #00ffff;
box-shadow: 0px 0px 12px #00ffff;
-moz-border-radius-topright:20px;Untuk memanggil kode diatas kita perlu memakai HTML berikut :
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-radius-top-left:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-webkit-border-radius-bottom-right:20px;
<a href="http://Boys-exp.net"/><img class="boxingg" src="http://LINK GAMBAR.jpg" width="360" height="240"/></a>
0 comments
Post a Comment
Nulis Kode
KODE
Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
:) :( =( ^_^ :'( =D T_T :Q @@ :P \o/ \m/ <3 0:) ^o^ :-bd :-d :-a (y)
Convert Code