15 Julai 2011

Efek Bump

Tiada ulasan:
 

*menggunakan css yang ringkas

Klik sinidan lihat pada efek bump

Pastekan kod ni sebelum/diatas kod ]]></b:skin>


.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}

.gobump img:hover {
margin-top: 2px;
}


Cara penggunaan kod adalah seperti ini:


<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="http://1.bp.blogspot.com/-gpM5rWq-bvg/Th-j3ClzBlI/AAAAAAAAAEU/SfD2NAyWBb4/s1600/bump_sign_W8-1_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://1.bp.blogspot.com/-gpM5rWq-bvg/Th-j3ClzBlI/AAAAAAAAAEU/SfD2NAyWBb4/s1600/bump_sign_W8-1_large.jpg" border="0" height="240" width="320" /></a></div>


*kod hijau class="gobump" adalah perlu untuk menyatakan kelas css bagi kod gambar.
*kod merah adalah kod gambar.

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger