Cara Membuat Kode Warna Transparan yang Keren

Warna merupakan bagian terpenting dalam membangun sebuah web desain, karena dengan warna suasana web atau blog akan terlihat indah apalagi kalau kita mampu memadu padankan warna, hasilnya bukan hanya keindahan yang didapat, kita pun akan betah untuk tetap tinggal berlama-lama menikmati suasa warna yang menyejukan, atau kadangkala sebuah warna juga dapat mengingatkan kita pada kenangan lalu.


Di artikel ini Anda bukan hanya mendapatkan kumpulan kode warna transparan yang keren saja, akan tetapi Anda juga akan mendapat panduan bagaimana cara menggunakan kode HTML warna untuk keperluan web/blog.

Dibawah adalah kumpulan kode warna transparan rgb yang keren, dan kelebihan dari warna transparan adalah bisa tembus pandang.

Namun terlebih dulu saya ingin menjelaskan bahwa warna transparan sangat identik dengan warna bening, tetapi yang akan dibahas di artikel ini bukan hanya warna transparan/warna bening saja, melainkan juga warna lainnya seperti merah, kuning, hijau dan sebagaimana yang bisa tembus pandang, nah arti lain dari tembus pandang juga bisa disebut transparan.

Mungkin akan sulit dibuktikan bahwa warna merah atau hitam bisa tembus pandang, namun jika Anda ingin membuktikanya coba perhatikan tombol naik turun dikanan bawah yang ada di blog ini, dan geser keatas atau kebawah tulisan ini.

Ada berbagai macam kode warna, ada kode warna transparan html, ada kode warna transparan css dan ada pula kode warna transparan rgb, dan yang akan dibahas di tulisan ini adalah kode warna rgb.

Inilah daftar dan contoh kode-kode warna transparan /tembus pandang

1.	transparent

01	rgba(204,0,0,0.8)

02	rgba(204,0,0,0.7)

03	rgba(204,0,0, 0.6)

04	rgba(204,0,0, 0.5)

05	rgba(204,0,0, 0.4)

06	rgba(204,0,0, 0.3)

07	rgba(204,0,0, 0.2)

08	rgba(204,0,0, 0.1)

01.	rgba(0,0,204, 0.8)

02.	rgba(0,0,204, 0.7)

03.	rgba(0,0,204, 0.6)

04.	rgba(0,0,204, 0.5)

05.	rgba(0,0,204, 0.4)

06.	rgba(0,0,204, 0.3)

07.	rgba(0,0,204, 0.2)

08.	rgba(0,0,204, 0.1)

01.	rgba(0,204,0, 0.8)

02.	rgba(0,204,0, 0.7)

03.	rgba(0,204,0, 0.6)

04.	rgba(0,204,0, 0.5)

05.	rgba(0,204,0, 0.4)

06.	rgba(0,204,0, 0.3)

07.	rgba(0,204,0, 0.2)

08.	rgba(0,204,0, 0.1)

01.	rgba(204,204,0, 0.8)

02.	rgba(204,204,0, 0.7)

03.	rgba(204,204,0, 0.6)

04.	rgba(204,204,0, 0.5)

05.	rgba(204,204,0, 0.4)

06.	rgba(204,204,0, 0.3)

07.	rgba(204,204,0, 0.2)

08.	rgba(204,204,0, 0.1)

01.	rgba(0,0,0, 0.8)

02.	rgba(0,0,0, 0.7)

03.	rgba(0,0,0, 0.6)

04.	rgba(0,0,0, 0.5)

05.	rgba(0,0,0, 0.4)

06.	rgba(0,0,0, 0.3)

07.	rgba(0,0,0, 0.2)

08.	rgba(0,0,0, 0.1)

01.	rgba(230,0,201, 0.8)

02.	rgba(230,0,201, 0.7)

03.	rgba(230,0,201, 0.6)

04.	rgba(230,0,201, 0.5)

05.	rgba(230,0,201, 0.4)

06.	rgba(230,0,201, 0.3)

07.	rgba(230,0,201, 0.2)

08.	rgba(230,0,201, 0.1)

01.	rgba(72,454,505, 0.8)

02.	rgba(72,454,505, 0.7)

03.	rgba(72,454,505, 0.6)

04.	rgba(72,454,505, 0.5)

05.	rgba(72,454,505, 0.4)

06.	rgba(72,454,505, 0.3)

07.	rgba(72,454,505, 0.2)

08.	rgba(72,454,505, 0.1)

01.	rgba(444,555,0, 0.8)

02.	rgba(444,555,0, 0.7)

03.	rgba(444,555,0, 0.6)

04.	rgba(444,555,0, 0.5)

05.	rgba(444,555,0, 0.4)

06.	rgba(444,555,0, 0.3)

07.	rgba(444,555,0, 0.2)

08.	rgba(444,555,0, 0.1)

01.	rgba(200,110,0, 0.8)

02.	rgba(200,110,0, 0.7)

03.	rgba(200,110,0, 0.6)

04.	rgba(200,110,0, 0.5)

05.	rgba(200,110,0, 0.4)

06.	rgba(200,110,0, 0.3)

07.	rgba(200,110,0, 0.2)

08.	rgba(200,110,0, 0.1)

Lalu bagaimana cara menggunakan kode warna transparan /tembus pandang diatas untuk keperluan blog ?

Jika Pemirsa ingin menggunakan kode warna tranparan /tembus pandang untuk mewarnai teks buatlah seperti ini:

<div style="color:rgba(204,0,0, 0.8);">Tulis teks yang akan diberi warna disini</div>

Kode yang berwarna merah adalah kode warna merah transparan /tembus pandang dan yang berwarna biru adalah teks yang akan diberi warna dan jika diunggah di posting blog hasilnya akan terlihat seperti ini:

Tulis teks yang akan diberi warna disini

Jika ingin mem-block teks atau tulisan dengan background warna maka buatlah seperti ini:

<table border="0"> <div style="background:rgba(0,0,204, 0.8); width:100% ;height:auto;font-size:18px; color:#ffffff; text-align:center;">Tulis teks yang akan diberi warna dan background disini.</div></table>

Jika di publikasikan di posting blog maka hasilnya akan terlihat seperti dibawah ini:

Tulis teks yang akan diberi warna dan background disini.

Jika Anda ingin membuat tabel atau background yang ingin diberi kode warna transparan/bening maka buat kodenya seperti ini:

<div style="background:transparent;color:252525;border:1px inset #ff0000;line-height:25px;width:auto; padding:3px;text-align:left;">Ini background transparent/transparent</div></div>:;

Jika diunggah diposting blog hasilnya akan seperti ini:

Ini background transparent/transparan