Februari 03, 2012

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

Untuk merubah atau mengetahui kode hex menjadi kode rgba, kalian bisa menggunakan aplikasi photoshop atau menggunakan tools kode warna dalam blog ini pada bagian menu. Dalam tools kode warna situseo blog memuat kode hex, rgba dan hsla, kalian bisa menentukan warna pilihan anda.

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

Semoga bermanfaat,

11 Diskusi untuk Membuat Background Warna Transparan Pada Post

26 Maret 2012 01.43  

angka paling besar dalam transparannya brp ya gan?
trus kodenya ditaruh dimana ya?
maaf saya masih newbie ^_^
terimakasih

26 Maret 2012 03.02  

@Rohmat Julianto angka paling besar 1=no transparan, penempatannya pada css bagian background seperti contoh pada post

17 April 2012 10.34  

@Mas Dalang pen mastiin jawaban aja gan. kalau bground website transprannya 1 berarti yang muncul putih polos (g da warna, sma aja kah kalau kita tidak memasang apapun d bground website kita,gt?) gt ya gan?

18 April 2012 00.33  

@downloadanku tergantung dari warna background-nya, kalau trasparant-nya memakai angka 1 = tidak transparant

9 Mei 2012 14.26  

Kalau tanpa photosop ada gak ya.

21 Mei 2012 06.06  

keren gan.....
untuk ane ini berguna sekali...
thaks ya bro....

Anonim
22 Mei 2012 07.08  

mantapp masta . ,
triknya ok
http://gubukderita.mywapblog.com

21 Juni 2012 19.32  

thanks sob.. infonyabagus.. visit me back

21 Juli 2012 07.54  

Mantap bro...
Thanks infonya :)

18 Juli 2013 15.19  

Bisa gann!!!!
Makasih infonya,
Visit Back ya gann !!
http://kesro54.blogspot.com/

16 Mei 2014 19.58  

gan, cara membuat menu seperti tampilan pada blog anda bagaimana ya? unik, saya tertarik utk mengetahui caranya

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top