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.
0 komentar:
Speak up your mind
Tell us what you're thinking... !