cara memberi efek transparan

saking maraknya sobat bloger mencari - cari Artikel mengenai Cara memberi Efek transparan di blog atau website baik itu untuk gambar ataupun sebagai background .menggugah mastony untuk mempostingkan Artikel mengenai Efek transparan ini.
Properti yang digunakan opacity:X.nilai X untuk browser seperti IE9 , mozilla , safari , chrome , opera 0.0 --> 1.0 dan nilai default X pada browser ini opacity:1.0 untuk mendapatkan efek transparan kecilkan nilai X nya,semakin kecil nilai X nya akan semakin transparan.
sedangkan untuk IE8 propertinya menggunakan filter:alpha(opacity=X) dan nilai default X pada browser ini filter:alpha(opacity=100).kecilkan nilai X nya untuk mendapatkan efek transparan.
gambar yang tidak di beri efek transparan


gambar yang diberi efek hover transparan

• login ke dasbor bloger
• klik template >> Edit Html >> cari kode ]]></b:skin> jika sudah letakkan kode salah satu dibawah tepat sebelum kode ]]></b:skin> tadi,

img{opacity:1;filter:alpha(opcity=100);}
img:hover{opacity:0.5;filter:alpha(opcity=50);}

Namun aturan css di atas secara global , dimana pada semua gambar akan mempunyai efek hover transparan.untuk membuat aturan css tersendiri anda harus menambahkan class (.) dan nama setelah class.contoh :
 

img.Transparan{opacity:1;filter:alpha(opcity=100);}
img.Transparan:hover{opacity:0.5;filter:alpha(opcity=50);}

cara  menggunakannya yaitu pada posting mode edit html sebagai berikut :

<img class="Transparan" border="0" src="lokasi gambar.jpg"/>

membuat background transparan

ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama

dan kode di atas sebagai berikut :

<style type="text/css">div.gambar{width:480px;height:380px;margin:0;padding:40px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/bunga.jpeg)repeat;}
div.latar {margin:0;padding:10px;border:1px solid black;
;background:#fff;width:100%; height:100%;opacity:0.5;filter:alpha(opacity=50);}div.latar p{;font-weight:bold;color:#000;text-align:left;line-height:1.4em;}</style>

<div class="gambar">
<div class="latar">
ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama,ini adalah contoh text dengan lar belakang efek transparan dan background gambar sebagai latar utama</div>

nah saya rasa cukup sekian tentang cara membuat efek transparan , semoga bermanfaat ..