Trik css Efek Gambar Beda Bentuk Ragam

Trik css Efek Gambar Beda Bentuk Ragam |Beberapa Macam Bentuk css img dalam 1 posting, Kali ini kan ane share trik css " membuat efek berbeda pada gambar"
Trik css desktop kali ini tentang membuat efek gambar yang berbeda - berbeda di dalam satu kolom postingan. mungkin sahabat suka menggunakan banyak gambar dalam satu postingan nah trik kali ini sangat cocok diterapkan di blog agan, dengan css ini setiap gambar - gambar yang ada akan menghasilkan efek gambar yang ber beda - beda satu sama yg lain .Berikut penjelasan nya

Tata cara nya:

  1 Tulis kode html gambar ini di post

  <*img class="gambar_1" src="url gambar" />  <*img class="gambar_2" src="url gambar" />  <*img class="gambar_3" src="url gambar" /> 

 atau  gambar menggunakan link

   <*a href="url link yg dituju"><*img class="gambar_1" src="url gambar" /><*a href="url link yg dituju">    <*img class="gambar_2" src="url gambar" />     <*a href="url link yg dituju"><*img class="gambar_3" src="url gambar" />

"hapus tanda (*)

2 Terus  buat code script css seperti dibawah ini dan terap kan di tema desktop:

   .gambar_1:hover { -moz-transform:scale(0.9); -webkit-transform:scale(0.9); -o-transform:scale(0.9);  }     .gambar_2:hover  { -moz-transform:scale(1.2); -webkit-transform:scale(1.2);-o-transform:scale(1.2);}    .gambar_3:hover  { border-radius: 25% 25%;}

Menerapkan code css nya masuk ke  Dashboard   > tema desktop > edit  > paste script css (gambar:hover)> save

Ket efek : gambar 1- akan menciut gambar 2- akan ngezoom dan gambar 3- akan mengkerut

Demikian lah efek hover kali ini semoga ber manfaat.

Cukup mudah bukan, hanya sentuhan mouse klik kiri - klik kanan jos pasang sana sini beres deh xixixi ....

Artikel fafan suka blogspot.com ini tentang Trik css Efek Gambar Beda Bentuk Ragam

Backlink here..

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <a href="http://fafansuka.blogspot.com/2013/06/trik-css-efek-gambar-beda-bentuk-ragam.html"><b>Trik css Efek Gambar Beda Bentuk Ragam</b></a> |Beberapa Macam Bentuk css img dalam 1 posting, Kali ini kan ane share trik css " membuat efek berbeda pada gambar"<br /> Trik css desktop kali ini tentang membuat efek gambar yang berbeda - berbeda di dalam satu kolom postingan. mungkin sahabat suka menggunakan banyak gambar dalam satu postingan nah trik kali ini sangat cocok diterapkan di blog agan, dengan css ini setiap gambar - gambar yang ada akan menghasilkan efek gambar yang ber beda - beda satu sama yg lain .Berikut penjelasan nya<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinFt-uKEQQKoz_SOifzZcFRc476Cn8aNqOFQV3i3OKBOAgbUq-38FMPxDENEVjdvRPNQUvszrPSHwE-6cSOvM381xpc-eOrHSUsJp1SLGLmgCCvuFs-35ue1p4nJW6BW1FT9E-yzB-_I/s1600/3efek.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Trik css Efek Gambar Beda Bentuk Ragam" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinFt-uKEQQKoz_SOifzZcFRc476Cn8aNqOFQV3i3OKBOAgbUq-38FMPxDENEVjdvRPNQUvszrPSHwE-6cSOvM381xpc-eOrHSUsJp1SLGLmgCCvuFs-35ue1p4nJW6BW1FT9E-yzB-_I/s1600/3efek.jpg" title="Trik css Efek Gambar Beda Bentuk Ragam" /></a></div> <br /> <br /></div> Tata cara nya:<br /> <br /> <div style="text-align: center;">   1 Tulis kode html gambar ini di post</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;">   <*img class="<span style="color: red;">gambar_1</span>" src="url gambar" />  <*img class="<span style="color: red;">gambar_2</span>" src="url gambar" />  <*img class="<span style="color: red;">gambar_3</span>" src="url gambar" />  </div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;">  <b>atau  gambar menggunakan link</b></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;">    <*a href="url link yg dituju"><*img class="<span style="color: red;">gambar_1</span>" src="url gambar" /><*a href="url link yg dituju">    <*img class="<span style="color: red;">gambar_2</span>" src="url gambar" />     <*a href="url link yg dituju"><*img class="<span style="color: red;">gambar_3</span>" src="url gambar" /></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> "hapus tanda (*)</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> 2 Terus  buat code script css seperti dibawah ini dan terap kan di tema desktop:</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;">    <span style="color: red;">.gambar_1</span>:hover { -moz-transform:scale(0.9); -webkit-transform:scale(0.9); -o-transform:scale(0.9);  }     <span style="color: red;">.gambar_2</span>:hover  { -moz-transform:scale(1.2); -webkit-transform:scale(1.2);-o-transform:scale(1.2);}    .gambar_3:hover  { border-radius: 25% 25%;}</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> Menerapkan code css nya masuk ke  Dashboard   > tema desktop > edit  > paste script css (gambar:hover)> save</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> Ket efek : <span style="color: red;">gambar 1</span>- akan menciut <span style="color: red;">gambar 2</span>- akan ngezoom dan <span style="color: red;">gambar 3</span>- akan mengkerut</div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> Demikian lah efek hover kali ini semoga ber manfaat<b>.</b></div> <br /> Cukup mudah bukan, hanya sentuhan mouse klik kiri - klik kanan jos pasang sana sini beres deh xixixi ....<img alt="" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" /><br /> <br /> Artikel fafan suka blogspot.com ini tentang <a href="http://fafansuka.blogspot.com/2013/06/trik-css-efek-gambar-beda-bentuk-ragam.html"><b>Trik css Efek Gambar Beda Bentuk Ragam</b></a></div> <br/> Sumber: <a href='http://fafansuka.blogspot.com/2013/06/trik-css-efek-gambar-beda-bentuk-ragam.html'> Fafan Suka Blogging, Tutorial Blogger | Tips Trik Blog | Belajar Blogspot | Bisnis </a>