Cara Membuat Warna Background Transparan di Blog

Cara Membuat Warna Background / konten Transparan di Blog - Pagi sob! sebelum kita mulai masuk ke tutornya, ada baiknya ane kasih kilas balik tentang postingan ane yang lalu. Sebelumnya saya telah memposting tentang cara membuat banner untuk link exchange dan kumpulan efek - efek blog ( lengkap ).

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!

Share :