banner image
Sedang Dalam Perbaikan

Cara Memberi Efek Menarik pada Gambar di Blog

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

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

5. Efek gambar bergerak ke samping

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

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

KODE CSS

KODE HTML

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

Cara Memberi Efek Menarik pada Gambar di Blog Cara Memberi Efek Menarik pada Gambar di Blog Reviewed by MCH on July 21, 2012 Rating: 5

No comments:

Powered by Blogger.