Kumpulan Efek - Efek Gambar Di Blog

Ketika anda menulis postingan baru harus memilih mode HTML jangan mode Compose. Copy Paste kode <style type="text/css">KODE CSS</style> di bawah <head>. Ganti KODE CSS dengan kode css yang diinginkan. Untuk menampilkan efek kode CSS tadi pada gambar, setiap kali kita ingin memasukan gambar kita gunakan kode HTML <img class="#" src="URL GAMBAR" />.

1. Efek Fade In = Membuat gambar menjadi blur lalu menjadi terangketika di sorot mouse

KODE CSS

KODE HTML

<img class="mode6" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<div align="center">
<b>Hasilnya seperti di bawah ini.</b></div>
<div align="center">
</div>
<div align="center">
</div>
<div align="center">
</div>
<div align="center">
<img class="mode6" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<br /><b>2. Efek membuat gambar menjadi melengkung lalu kembali ke seperti semula ketika di sorot kursor</b><br /><br /><div align="center">
<b>KODE CSS</b></div>
<div align="center">
<textarea name="code" rows="4" cols="40">.mode7 {     border-radius: 30px 0 30px 0;     -moz-border-radius: 30px 0 30px 0;     -webkit-border-radius: 30px 0 30px 0;     -o-border-radius: 30px 0 30px 0;     transition: all 0.5s;     -moz-transition: all 0.5s;     -webkit-transition: all 0.5s;     -o-transition: all 0.5s; } .mode7:hover {     box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);     border-radius:0;     -moz-border-radius:0;     -webkit-border-radius:0;     -o-border-radius:0; }

KODE HTML

<img class="mode7" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<div align="center">
<b>Hasilnya seperti di bawah ini.</b></div>
<div align="center">
<img class="mode7" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<b>3. Efek Rotasi = Membuat gambar berputar dan membesar saat di arahkan kursor mouse</b><br /><b></b><br /><br /><div align="center">
<b>KODE CSS</b></div>
<div align="center">
<textarea name="code" rows="4" cols="40">.mode8{ border: 3px solid #D8D8D8; border-style:double; margin:10px auto; text-align:center; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; padding-top:5; padding-left:5; padding-bottom:5; padding-right:5; } .mode8:hover{ -webkit-transform:rotate(720deg) scale(2,2); -moz-transform:rotate(720deg) scale(2,2); -o-transform:rotate(720deg) scale(2,2); -ms-transform:rotate(720deg) scale(2,2); transform:rotate(720deg) scale(2,2);     }

KODE HTML

<img class="mode15" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<div align="center">
<b>Hasilnya seperti di bawah ini.</b></div>
<div align="center">
</div>
<div align="center">
</div>
<div align="center">
</div>
<div align="center">
</div>
<div align="center">
<img class="mode15" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></div>
<script src="http://www.lintas.me/assets/scripts/widget_v2.js?uid=5204b4131b971a5921000a05" type="text/javascript"></script><script type="text/javascript">lintasme.init('right'); // options : left, top, bottom, right </script>   <p>
<i>Rizky y <span title='2013-08-14T15:34:06.681+07:00'>14 Aug, 2013</span></i>   </p>
<br>-<br>Source: <a href="http://rizkyekoyblog.blogspot.com/2013/08/kumpulan-efek-efek-gambar-di-blog.html">http://rizkyekoyblog.blogspot.com/2013/08/kumpulan-efek-efek-gambar-di-blog.html</a><br>--<br><a href="http://rssforward.com/subscriptions/57f32ec25014bc0ad72fd8a52ea6d088/edit">Manage subscription</a> | Powered by <a href="http://rssforward.com/?footer">rssforward.com</a>

Diterbitkan Oleh : Lebihunik.com

ARTIKEL TERKAIT

Tips Blog

Lebih Unik

Kumpulan Efek - Efek Gambar Di Blog

ARTIKEL TERKAIT

Daftar Artikel