Followers

05 September 2010

September 05, 2010 - 3 comments

Blog Tutorial:Special Efek Pada Gambar

Ini ada sebuah tutorial yang mudah dan best untuk korang,letakkan efek fade in pada gambar korang,gerakkan mouse korang kat gambar demo di bawah

Demo:Efek Fade In Style 1


Demo:Efek Fade In Style 2

Cara-cara nak buat amat mudah,copy salah satu kod pilihan anda,atau nak ambil dedua pun boleh,dan pastekan sebelum/diatas kod ]]></b:skin>

Kod Untuk Fade In Style 1

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}


Kod Untuk Fade In Style 2

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}

Save template dan sekarang,bila korang ada gambar yang korang nak letak efek ni,korang kena buat camni

Contoh Lihat Gambar Ni:

Ini merupakan kod biasa bagi gambar diatas:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_P7J-V68xQZ4/TIMAQymtG5I/AAAAAAAAByI/zSIqsHjOgnw/s1600/blog_icon.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_P7J-V68xQZ4/TIMAQymtG5I/AAAAAAAAByI/zSIqsHjOgnw/s320/blog_icon.gif" /></a></div>

Ok,sekarang untuk letakkan efek,Cuma Perlu Tambahkan Perkataan class="Fadein" bagi style 1 atau class="Fadein2" bagi style 2

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_P7J-V68xQZ4/TIMAQymtG5I/AAAAAAAAByI/zSIqsHjOgnw/s1600/blog_icon.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="Fadein" src="http://2.bp.blogspot.com/_P7J-V68xQZ4/TIMAQymtG5I/AAAAAAAAByI/zSIqsHjOgnw/s320/blog_icon.gif" /></a></div>

Hasilnya:



3 ulasan:

err..tiap kali letak gambar kena letak kod class="Fadein tu secara manual eh? takde yg otomatik ke?

Catat Ulasan