Cara Memberi Efek Transparan Pada Background Warna

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 di depannya dan lapisan di belakangnya 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.

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 Kaka-jR 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.


Okey, sob...
Sekian dulu penjelasan dari Kaka-jR untuk info Cara Memberi Efek Transparan Background Pada Blog, semoga bermanfaat ya...


Share:

5 comments

  1. wooyyy mampir,,, numpang lewat doang....

    ;e

    ReplyDelete
  2. ;j kalo mau warna lain gimana ini ;o

    ReplyDelete
  3. klo kolom teksny yg dtransparanin byar backgroundny kliatn gmn ya crany????

    ReplyDelete
  4. mantap gan.....kunjung balik ke bllog saya, http://ponda-samarkand.blogspot.com

    ReplyDelete