Tips Triks CSS | Bikin Gambar Redup Menjadi Terang Saat Kursor Diarahkan ke Gambar Dengan CSS

Ini salah satu hasil kreasi [jika tidak mau dibilang duplikasi...hehe] dari belajar CSS online seperti pada post sebelumnya. Terlihat cukup keren jika ada gambar di blog kita ber-efek animasi seperti gambar redup menjadi terang saat kursor melewati gambar tersebut. Dalam bahasa Inggris tehnik ini disebut dengan "Image Transparency - Mouseover Effect".

Adapun kelebihan lainnya, dengan menggunakan tehnik CSS ini, sama sekali tidak membuat loading blog kita menjadi lambat karena ada efek animasi di dalamnya. Sangat berbeda sekali jika kita menggunakan tehnik serupa menggunakan JQuery seperti pada animasi popular post.

Berikut kode CSS yang membentuk gambar redup menjadi terang saat kursor diarahkan ke gambar.

<img src="URLGAMBAR" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Dan ini adalah bentuk tampilan gambar dari hasil kode diatas. Coba arahkan kursor ke gambar ini untuk melihat hasilnya

Selamat berkreasi dan mencoba...happy blogging!

Read more »

Belajar Dan Mengenal CSS Secara Online

Kita mungkin tidak asing lagi dengan istilah CSS [Cascading Style Sheets] yang merupakan salah satu bahasa bahasa pemrograman web yang cukup di gandrungi. Setidaknya pada template blogspot saat ini, CSS sudah menjadi bagian pokok yang membentuk tampilan blog kita.

Saya menemukan sebuah situs yang cukup bagus buat belajar bahasa pemrograman web CSS secara online dan tentunya gratis. Pada situs tersebut kita diberi contoh sekaligus halaman percobaan tersendiri agar kita bisa berekploasi dan mempraktekkan apa yang telah di contohkan. Ingat, tidak hanya pemula yang dimanjakan situs ini. Tingkat advance-pun bisa nimbrung tuk belajar.

Secara keseluruhan situs tersebut tidak hanya memberi materi seputar CSS. Kita bisa juga belajar HTML, Php, JavaScript dan banyak lagi bahasa pemrograman web lainnya. tertarik untuk mencoba? Silahkan kunjungi www.w3schools.com untuk belajar dan mengenal CSS secara online.

Hehe...Gue dah bisa bikin gambar redup jadi terang saat mouse di arahkan ke gambar di atas..horeee!

Read more »