Hakimtea Dot Com

Siapa bilang transparan hanya dimiliki oleh software pengolah gambar, semacam Adobe Photoshop. Kita ternyata bisa menyerahkan urusan itu pada CSS, dengan kemampuannya dalam membuat transparan objek atau elemen halaman web. Tadinya thom tidak tahu kalau CSS bisa digunakan untuk manipulasi objek sampai pada taraf itu. Tidak sampai berpikir ke tahap itu. Sampai pada suatu saat, thom berkesempatan blogwalking dan mampir ke sebuah blog yang navbar buatan blogger tersebut transparan.

Nah, sekarang langsung saja praktek bagaimana menampilkan objek ditampilkan transparan.

Misal kita akan membuat transparentcy 50%, cukup tambahkan properti seperti berikut :

/*contoh seting transparentcy di stylesheet*/
.namakelas [
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

atau bisa juga menambahkan secara manual di setiap objek atau tag yang diingini dengan menambahkan :
style=”filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;”

Misalkan diimplementasikan pada tag img :
<img src=”http://blablabla.com/blabla.gif” style=”filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;”/>

Keterangan :
properti filter:alpha(opacity=50);
Ini merupakan setingan pada browser IE

properti -moz-opacity:0.5;
Kalau ini, digunakan untuk browser ‘jadul’ seperti Netscape.

properti -khtml-opacity: 0.5;
Untuk yang satu ini, diterjemahkan oleh Safari versi ‘jadul’ 1.x.

properti opacity: 0.5;
Kalau yang ini, merupakan yang paling penting. Properti ini bisa diterjemahkan oleh Firefox, Safari dan Opera.

Note :
Yang harus diperhatikan, untuk berjaga-jaga, keempat properti tersebut sebaiknya ditulis. Tidak hanya dicomot salah satu hanya karena kita hanya butuh misalnya yang properti opacity: 0.5; saja. Kita tidak bisa memastikan orang yang membuka web/ blog hanya berasal dari satu browser saja bukan?

Artikel Kontes Blog 1 Tahun Hakimtea.com
Judul : Membuat Objek Transparan Memakai CSS
Penulis : thom
Blog : http://thom-sharing.blogspot.com

Popularity: 2% [?]

Related posts :

• Dukung Saya di Kenali dan Kunjungi Objek Wisata di Pandeglang ya!
Kontes SEO Kenali dan Kunjungi Objek Wisata di Pandeglang semakin
• Kontes SEO “Kenali dan Kunjungi Objek Wisata di Pandeglang”
Bagi Anda penggemar kontes SEO, hari ini (17/8/09) rilis kontes
• Pertama kalinya mengenal SEO
SEO adalah kepanjangan dari Search Engine Optimization. Dan lebih bisa
• Mengenal bisnis di dalam blog
Didalam dunia blog tidak hanya menjadi sumber informasi buat kita
• Cara Promosi Blog yang Praktis dan Efesien
Assalamu ‘alaikum para pembaca yang saya hormati, kali ini saya