Skip to main content

Kumpulan Kode Warna Css Transparan Keren Lengkap Full Color

Caricara.web.id - Halo temen-temen saya mau cerita nih, seharian tadi saya di pusingkan dengan mencari kode warna css untuk mengedit warna pada templete saya. Dari 10 website menyediakan kode warna css transparan saya msih bingung dengan penjelasan mereka maklum masih nub.

Namun saya tidak menyerah dan ahirnya saya menemukan sebuah website yang membahas tentang warna RGBA yang artinya Red Green Blue Alpha. setelah saya baca dengan seksama dan saya pahami pelan-pelan, ahirnya megerti juga.

Intinya kita harus memilih warna antara merah (R) hijau (G) biru(B) dan Alpha( A) contoh warna merah transparan rgba(204,0,0 0.5) , perhatikan angka dalam kolom tersebut.

Kumpulan Kode Warna Css Transparan Keren Lengkap Full Color

Dari kode tersebut kita dapat tahu bahwa angka 204 di awal itu menunjukan warna merah dan untuk membuat warna transparan kalian harus menambahkan kode Alpha, pada contoh di atas adalah 0.5.

Nilai Alpha akan membuat warna transparan dan tembus pandang jika nilainya 0 atau 0.1  sampai 0.8,  jika nilai alpha lebih dari itu maka warna akan pekat seperti kode warna css 3 digit yang biasa kita di gunakan dalam css.

Daripada pusing - pusing saya menyediakan kumpulan kode warna html transparan lengkap full collor dan masih bisa di kreasikan jika anda paham penjelasan atas.


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)



Cara menggunakan kode warna css transparan keren


Cara menggunakan kode warna transparan tinggal ganti saja css blog kalian di edit html.
contoh : jika ingin mengubah background maka cari kode {background:#c1cfd9;} lalu ganti kode warna #c1cfd9 dengan kode warna transparan di atas maka jadi seperti ini {background:rgba(200,110,0, 0.5);}.

Kurang lebih begitu cara penulisan kode warna transparan untuk background dan jika ingin membuat teks transparan berikut contoh nya penulisannya:


 <!DOCTYPE html>
<html>
<head>
<title>Cara Penulisan RGBA</title>
<style type="text/css">
   h2.satu {color: rgba(255,0,0,1);}
   h2.dua {color: rgba(255,0,0,0.8);}
   h2.tiga {color: rgba(255,0,0,0.6);}
   h2.empat {color: rgba(255,0,0,0.4);}
   h2.lima {color: rgba(255,0,0,0.2);}
   h2.enam {color: rgba(255,0,0,0);}
</style>
</head>
<body>
   <h2>Contoh Penggunaan kode warna RGBA: </h2>
   <h2 class="satu">Membuat Teks Transparan dalam CSS</h2>
   <h2 class="dua">Membuat Teks Transparan dalam CSS</h2>
   <h2 class="tiga">Membuat Teks Transparan dalam CSS</h2>
   <h2 class="empat">Membuat Teks Transparan dalam CSS</h2>
   <h2 class="lima">Membuat Teks Transparan dalam CSS</h2>
   <h2 class="enam">Membuat Teks Transparan dalam CSS</h2>
</body>
</html>

Kode Warna Css Transparan Keren Lengkap Full Color

Mungkin cukup sekian penjelasan panjang dan agak ribet ini tentang Kumpulan Kode Warna Css Transparan Keren Lengkap Full Color, semoga bisa bermanfaat ya. Dan kunjungi terus website ini untuk informasi menarik lainya.

Admin
DhedyKurnia DhedyKurnia adalah orang biasa yang menyukai dunia Teknologi khususnya internet. Kini dia ingin berbagi tutorial, tips trik, serta informasi seputar Teknologi.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar