Cara Memberi Efek Menarik pada Gambar di Blog | Belajar Html Lengkap

Cara Memberi Efek Menarik pada Gambar di Blog

Posted by noeroel arashi | 23:31 | tutorial blog, tutorial CSS | 0 comments »

Cara Membuat Efek pada Gambar dengan CSS

Tutorial Bog-CSS| Cara memberi efek menarik pada gambar di blog dengan CSS merupakan salah satu tips untuk mempercantik tampilan blog kita. Mungkin di antara kita pernah mengunjungi suatu blog dan ketika kita mengarahkan kursor mouse pada gambarnya maka akan muncul efek seperti berputar, melengkung, bergetar, bergerak ke samping, dll. Sebagaimana kita tahu bahwa CSS tidak membuat loading di blog kita menjadi berat namun kode-kodenya dapat membuat tampilan blog kita semakin menarik dan keren, sehingga tidak ada salahnya kalau kita menerapkannya pada blog kita. Berikut ini ada beberapa contoh kode CSS yang dapat digunakan untuk memberi efek pada gambar di blog kita.

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 terang ketika disorot/diarahkan kursor mouse)

KODE CSS

.mode6 { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } .mode6:hover { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

KODE HTML

<img class="mode6" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

2. Efek membuat gambar menjadi melengkung lalu kembali ke seperti semula ketika diarahkan/disorot kursor mouse.

KODE CSS

.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" />

Hasilnya seperti di bawah ini.

3. Efek Rotasi (membuat gambar berputar dan membesar ketika diarahkan/disorot kursor mouse).

KODE CSS

.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="mode8" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

4. Efek Skew (Membuat gambar menjadi berpendar ketika diarahkan/disorot mouse).

KODE CSS

.mode9 { transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .mode9:hover { box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); }

KODE HTML

<img class="mode9" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

5. Efek gambar bergerak ke samping

KODE CSS

.mode10{ -moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out; } .mode10:hover{ -moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt); }

KODE HTML

<img class="mode10" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

6. Efek Fade Out (membuat gambar menjadi blur ketika diarahkan/disorot mouse).

KODE CSS

.mode0{ -webkit-transition:opacity .5s ease-out; -moz-transition:opacity .5s ease-out; -ms-transition:opacity .5s ease-out; -o-transition:opacity .5s ease-out; transition:opacity .5s ease-out; } .mode0:hover{ opacity:0.2; }

KODE HTML

<img class="mode0" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

7. Efek Bumping (membuat gambar bergerak ke atas ketika diarahkan/disorot mouse).

KODE CSS

.mode1{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .mode1:hover{ -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,10px); transform:translate(0px,-10px); }

KODE HTML

<img class="mode1" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

8. Efek melengkung (membuat sudut gambar menjadi melengkung ketika diarahkan/disorot mouse).

KODE CSS

.mode12{ 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; } .mode12:hover { 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; }

KODE HTML

<img class="mode12" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

KODE CSS

.mode13 {-webkit-transition-duration:.4s;} .mode13:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}

KODE HTML

<img class="mode13" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

9. Efek bingkai bergaris ketika gambar diarahkan/disorot mouse.

KODE CSS

.mode14 { border:1px solid #ccc; padding:10px; } .mode14:hover { border:1px dashed #ff0000; padding:10px; }

KODE HTML

<img class="mode14" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

10. Efek bayangan/shadow ketika gambar diarahkan/disorot mouse.

KODE CSS

.mode15 { border:1px solid #0000ff; } .mode15:hover { background-color:#47b847; box-shadow: 5px 5px #aaa; -webkit-box-shadow: 5px 5px #aaa; -moz-box-shadow: 5px 5px 8px #4170cf; }

KODE HTML

<img class="mode15" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" />

Hasilnya seperti di bawah ini.

Sekian Tutorial Blog-CSS mengenai tips mempercantik tampilan gambar pada blogspot dengan menggunakan CSS yang bisa saya share kali ini. Semoga bermanfaat dalam meningkatkan tampilan blog anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca postingan ini. Terima kasih atas perhatiannya. Sampai jumpa di postingan saya selanjutnya. Salam...

0 comments

Subscribe to: Post Comments (Atom)