Membuat Background Warna Transparan Pada Post

Situseo Blog : Salah satu unsur utama dalam mendesign tampilan blog adalah garis (border) dan warna (background), gambar (image) merupakan faktor pendukung untuk lebih menekankan maksud dari blog tersebut, dengan membuat background warna transparan atau warna berbeda akan lebih memperlihatkan lapisan-lapisan background dalam template.

Dari tiap lapisan background, jika kita memberi background warna transparan untuk lapisan background didepannya dan lapisan dibelakangnya merupakan background warna, tidak akan berpengaruh banyak, hanya akan merubah warna hasil percampuran warna lapisan depan dan belakang, berbeda jika lapisan belakangnya memiliki objek gambar (background gambar) atau adanya teks, tentu gambar atau teks tersebut akan terlihat tembus pandang atau transparan.

Sebagai contoh objek yang akan diperlihatkan adalah teks (seperti dalam bagian post ini kalau belum saya rubah), pada bagian post tersebut saya memberi warna background dengan warna hitam dan objek teks berwarna hitam, tanpa pemberian efek transparan (transparent) tentu objek teks-nya tidak akan terlihat, karena tertutup warna background.

Bagaimana Cara Memberi Efek Transparan Pada Background Warna

Dalam pengkodean warna css dalam template blog, biasa menggunakan kode HEX seperti ini #000000 yang merupakan kode untuk warna hitam, jika kita menggunakan kode hex dalam background tidak akan memberikan warna yang transparan terhadap objek teks. Untuk memberikan efek transparan terhadap objek teks, kita harus merubah pengkodean warna hex dengan warna RGBA, warna hitam untuk rgba adalah :

(0, 0, 0,)

dengan pengkodean warna (0, 0, 0,) tidak akan menghasilkan warna yang transparan, kita harus tambah perintah opacity dibelakang kode, sebagai ilustrasi saya gambarkan seperti dibawah ini :

background: rgba(0, 0, 0, 0.2);

warna kuning merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna biru merupakan kode untuk transparansi.

Bagaimana Merubah Kode HEX Menjadi Kode RGBA

Tips ini mungkin ringan bagi kalian, tapi menurut saya, ini merupakan bagian penting dalam mendesign tampilan suatu blog.

Semoga bermanfaat,

sumber : http://situseo.blogspot.com/

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s