Trick Menjadikan Item Box Transparent Tanpa Opacity

Tutorial untuk membuat item box semi transparan, tanpa meredupkan isinya / kontennya.

Bagi para penggemar site dengan nuansa transparan, modal utama untuk melaksanakannya adalah dengan perintah background-color:transparent dan opacity (opacity, hanya berjalan di Mozilla Firefox saja).

Jika dua modal ini kita gabungkan, maka kita akan mempunyai kekuatan untuk mengatur tampilan site kita dengan transparansi 0-100%. Maksudnya, transparan 100% diibaratkan seperti kaca bening, tembus pandang. Apapun yang berada di balik kaca, terlihat 100%.
Dan 0% berarti tidak tampak apa-apa, diibaratkan pandangan terhalang dinding tembok. Apa yang berada di balik dinding, tidak terlihat sama sekali.

Value warna transparent tidak bisa diatur persentasenya, dia hanya mempunyai 2 kemungkinan yaitu kalau tidak "transparan", ya "Opaque".
Yang bisa diatur persentase tembus pandang / tembus cahaya adalah property Opacity.
Opacity adalah kebalikan dari transparan. Opacity = 0 berarti tembus pandang bak kaca bening. Opacity = 0.25 seperti kaca terlapisi kaca film 25% dan Opacity = 1.0 seperti kaca dilapisi tripleks ... tidak tembus pandang sama sekali.

Berikut adalah trick untuk membuat latar belakang tembus pandang, tetapi tulisan maupun gambar yang berada di latar depan ( foreground ) tidak ikut meredup.

Berikut adalah gambar ilustrasi, agar anda mudah memahami dan dapat membedakannya :

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Default

Gambar di atas, adalah efek pemberian perintah transparent terhadap div#page_start dan background-color:white di class itembox.

Jika pada class itembox kita beri value transparent kepada property background-color dengan menyebutkan background-color: transparent; maka hasilnya akan seperti berikut ini.
Informasi yang terkandung di dalamnya sedikit terganggu, karena text warna hitam akan sulit dibaca jika berlatar belakang warna hitam juga.

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Transparent

Berikut ini, adalah contoh pemberian transparansi 50% dengan perintah opacity:0.5

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Opacity

Bisa dilihat di sini, bahwa tulisan / text beserta gambar logo MP ikut meredup.
Text yang semula berwarna hitam, menjadi abu-abu.
Agar warna text tetap, sesuai seting serta gambar tampil jelas, maka diperlukan trick yang jika sudah anda pahami, anda pasti akan bergumam "Ooooo ... begitu. Saya juga bisa, kalau hanya begitu saja" ... Nah, mari kita intip "begitu" nya tersebut.

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Semi transparent image

"Begitu" tersebut adalah, memasang image yang semi transparent sebagai background.

.itembox {
background:transparent url(http://images.dangdutkoplo.multiply.com/image/1/photos/35/500x500/1/opacity50.png?et=6dwDa2KUvk23e5ZZ8FH0Aw&nmid=236245969) repeat scroll 0 0;
}

Dan Item Box anda akan semi transparent.
Disamping itu, anda akan mendapatkan bonus Site anda akan tampak sama di semua browser, baik browser yang mendukung Opacity seperti Mozilla Firefox maupun yang tidak mendukung opacity.

Image ini mempunyai Opacity 0.65 atau transparan 35%.
Anda bisa mendapatkan image tersebut pada alamat :

http://images.dangdutkoplo.multiply.com/image/1/photos/35/500x500/1/opacity50.png?et=6dwDa2KUvk23e5ZZ8FH0Aw&nmid=236245969

Semoga membantu.

© 2009 Lilok http://dangdutkoplo.multiply.com