Cari Blog Ini

My Best Friend

Arsip Blog

Diberdayakan oleh Blogger.

Label

Traffic Visitor

Flag Counter
10 Mar 2013

cara membuat background posting blog menjadi transparan

04.24 | Diposting oleh | Edit Entri


MEMBUAT BACKGROUND POSTING MENJADI TRANSPARAN


Yang saya lakukan untuk membuat latar posting ini transparan adalah mengganti latar post dari nilai hexadesimal ke rgba. Pertama-tama saya mengganti latar .main-inner menggunakan gambar yang saya buat menggunakan aplikasi photoscape dan saya upload ke album web  seperti berikut :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}

property repeat di atas untuk mengakali ukuran gambar yang kecil ditampilkan berjajar hingga memenuhi 100% bagian main inner. Sedangkan tujuan penggunaan gambar tersebut untuk lebih menonjolkan efek transparan dari latar posting nantinya, dan penggunaan kode warna#7b7c47 untuk mengantisipasi gagalnya loading gambar atau hilangnya gambar jika terhapus dikemudian hari.

Berlanjut ke bagian posting, karena saya sebelumnya memberikan latar gambar dengan dominasi warna hijau tua, maka kali ini saya membuat latar posting berwarna putih yang memiliki nilai RGB 255,255,255 dan saya tambahkan nilai akhir 0.79 yang akan membuat warna putih tersebut menjadi transparan. Untuk anda yang ingin ikut mencoba, sedikit petunjuk bahwa semakin kecil nilai akhir yang kita tambahkan tersebut maka tampilan warna akan semakin transparent.

Kemudian untuk sedikit mempermanis, saya tambahkan juga border dengan warna biru muda, sebagai tambahan materi, Lengkapnya, berikut style yang saya tambahkan :

.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

Sehingga jika digabung dengan kode di awal tadi menjadi :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;} 
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)} 

dan saya tambahkan tag style hingga lengkapnya :

<style type="text/css">
.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;margin-left:10px;} 
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}
</style>

lalu saya simpan di akhir postingan ini dalam mode HTML, dan selesailah usaha saya untuk mengganti background posting dengan warna transparan.
Bagaimana menurut anda? apa yang harus saya perbaiki? dan ataukah anda mempunyai cara yang lebih mudah? silahkan berbagi atau share artikel ini melalui tombol share social media di bawah posting ini.
Terima kasih.

0 komentar:

Posting Komentar

anda sopan ,kami segan, Thank's for u coment

Langganan: Posting Komentar (Atom)