Home » » Membuat Background Transparan

Membuat Background Transparan

Kali ini, kita akan membahas tentang penggunaan opacity pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutorial kali ini saya khususkan untuk blog dengan background image atau gambar, tidak terlalu bagus untuk backround warna karna hanya akan menghasilkan perpaduan ke 2 warnanya saja. Misalnya sobat menggunakan background berwarna hitam dengan warna outer-wrapper berwarna putih, maka hasil perpaduannya akan memunculkan warna abu-abu.. jadi nggak berguna dong efek tranparantnya...

berikut kode yang di gunakan untuk membuat background transparan

filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;


Untuk penerapannya sobat tinggal menyisipkan kode tadi sesudah kode warna. seperti berikut.

#outer-wrapper{
width:980px;
margin:0 auto;
padding:5px;
background:#f2f2f2;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;

border:1px solid $bordercolor;
text-align:$startSide;
font:$bodyfont
}

Tambahan :
1. Berlaku juga untuk wrapper lainnya seperti header, main, sidebar dan footer, namun saran saya untuk tidak menerapkannya di wrapper lain jika sudah di pasang di outer-wrapper, karena outer-wrapper sudah mencakup semua bagian wrappernya.
2. Edit angka yang berwarna merah hingga sesuai dengan keinginan.
 
Support : Okieweb | Papuahackers | Designed by Zero Point
Copyright © 2011. Blog Catatanku - All Rights Reserved | Proudly powered by Blogger