Cara Memberi Efek Transparan Background Warna

"Cara Memberi Efek Transparan Background Warna"

   Hallo sobat, kali ini saya akan postingkan artikel tentang "Cara Memberi Efek Transparan 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 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.

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.

Contohnya seperti dibawah ini :

kode :

<div style="border: 3px #A50C0C Double; padding: 10px;background: rgba(0,0,0,0,2);
text-align: left;">
.Contoh Background Rgba.</div>

Copas code  DISINI

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

Keterangan :

   warna hijau merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna merah merupakan kode untuk transparansi.

Untuk 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 kreasi kita blog memuat kode hex, rgba dan hsla, kalian bisa menentukan warna pilihan anda.

   Nah, Sekian artikel dari saya tentang "Cara Memberi Efek Transparan Background Warna" semoga bisa bermanfaat untuk kita semua...

"Terima Kasih"