Penggunaan efek transparan pada pada image atau background menambah nilai estetika sebuah desain web. Biasanya kita bisa menggunakan image untuk mendapatkan efek transparansi ini dan Photoshop adalah software yang tepat untuk itu. Salah satu contohnya seperti ini :

Contoh gambar diatas dibuat menggunakan Photoshop. Tetapi kali ini saya mengajak kita untuk membuatnya menggunakan CSS, full CSS tanpa repot – repot menggunakan Software. Tentunya dngan pertimbangan bahwa banyak pembaca tidak terlalu paham akan Photoshop, seperti saya hehehe.

Ok, sekarang saya akan membuat gambar ini transparan. Bandingkan dengan gambar asli.

Before

After

Gambar terakhir itu saya buat dengan script ini

<img style=”opacity:0.5;src=”lokasi gambar”/>

Kelemahannya adalah efek transparansi pada gambar tersebut hanya bisa dilihat dengan Mozilla Firefox dan versi terbaru dari browser – browser lain. Bisakah efek tersebut bisa efektif  dilihat oleh semua browser, Internet Explorer dan browser versi lawas lainnya ?
Untuk itu saya menggunakan script berikut

<img style="opacity:0.5;-moz-opacity;0.5;-khtml-opacity:0.5;filter:alpha(opacity=50); src="lokasi gambar"/>

Penjelasan Script :

• opacity: 0.5; Merupakan standar baku transaransi CSS yang bekerja Firefox, Safari dan Opera.
• filter:alpha(opacity=50); Berfungsi di Internet Explore
• -moz-opacity:0.5; Berfungsi di versi lawas dari Firefox
• -khtml-opacity: 0.5; Berfungsi di versi lawas dari Safari
• 0.5 ; Merupakan nilai transparansi. Silahkan ubah sesuai keinginan

Kasus terakhir adalah bagaimana jika saya harus membuatnya secara statis. Misalkan membuat Sidebar transparan. Untuk itu saya harus membuatkan sebuah selector class CSS seperti ini ;

.transparan {
-moz-opacity:0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
filter:alpha(opacity=50);
}

Mudah bukan? Sekian dulu tutorial saya tentang CSS kali ini. Be Back Later