Membuat Objek Transparan Memakai CSS
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% [?]
Themocracy
loh? sempat update?, bukankah tanggal 5 kemarin ituuuuuu, hari ‘sibuk’mu… huehe he he he… hakim teaaaaa, hebat memang, dipuncak kesibukanpun sempet2ya update posting… jadi malluu eueuey….
Wah mantep om… Kalau menampilkan gambar diluar halaman kayak di blogger bagai mana caranya om…?
wah memang bener kang….transparant……tapi aku pernah pake kok jadi lambat yah buka blognya kang
sebelum nya gue pernah nyoba supaya transparan tapi gagal , bantuin dong
berhasil bos, udah gue coba .. top banget
Wahh keren nih !
Wah wah wah !
bikin blog tambah cakep nih. tapi mbebanin blog pas loading gak ya mas ?
kerennn…Bro