Cara Membuat Warna Background / konten Transparan di Blog

Kali ini, kita akan membahas tentang penggunaan opacity ( keburaman ) pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutor 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.
3. Contoh template dengan background transparan klik di sini!

Tweet

Subscribe to receive free email updates: