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 :
- 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.
- Edit angka yang berwarna merah hingga sesuai dengan keinginan.
- Contoh template dengan background transparan klik
0 komentar:
Posting Komentar
Boleh komentar apa saja.