Tutorial CSS Mengatur Transparansi

Tutorial CSS Mengatur Transparansi

Dengan menggunakan properti CSS kita bisa mengatur transparansi suatu objek atau elemen HTML, seperti gambar, tulisan dan lainnya.

Untuk mengatur transpransi di IE kita menggunakan kode CSS: filter:alpha(opacity=x), sedangkan di Firefox, kita menggunakan kode CSS: opacity:x.

Di Firefox (opacity:x) x bisa bernilai 0.0 - 1.0. Semakin kecil semakin transparan.
Di IE (filter:alpha(opacity=x)) x bisa bernilai 0 - 100. Semakin kecil semakin transparan. Di IE, supaya trasparansi bisa berjalan objek harus memiliki dimensi seperti panjang(width) dan lebar
 

Ini Tulisan Transparan

Sekarang mari kita lihat contoh-contohnya:

Contoh kode CSS di atas adalah:

<div style="width:450;height:243;background-image:url('gambar/pemandangan.jpg');

border:#ababab 1px solid;">

<p>&nbsp;</p>

<h2 style="opacity:0.5;filter:alpha(opacity=50);width:100%;font-size:40pt">

Ini Tulisan Transparan

</h2>

</div>

Sekarang kita lihat contoh lainnya, di mana kita me set transparansi suatu gambar:

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

Coba anda letakkan cursor di atas gambar berikut

Kode CSS di atas adalah:

<img src="gambar/pemandangan.jpg" width=150 height=90

style="opacity:0.5;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">

dari pada bingung sma contoh di atas mending coba sendiri aj...!