--> Skip to main content

72 Kode Warna Css Transparan Full Color Tinggal Copy

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. setelah saya baca dengan seksama dan saya pahami pelan-pelan, ahirnya megerti juga.

Beda RGB vs RGBA

Penjelasan singkatnya: RGB adalah warna dasar yang biasa digunakan dalam pembentukan warna, pada grafis komputer maupun smartphone. Terdiri dari warna Red (merah) Green (hijau) dan Blue( biru).

Sedangkan RGBA : Terdapat perbedaan huruf A yang artinya itu Alpha yang berfungsi sebagai warna transparant.

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.

Contoh Kode Warna Transparan RGBA

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)

Contoh Kode Warna CSS Transparan Alternatif

Selain menggunakan kode RGBA temen-temen juga bisa menggunakan kode alternatif yang lebih ringkas dan mudah.

Yaitu menggunakan kode hexadecimal tapi harus ditambahkan kode-kode berikut supaya transparan:

Kode Transparan
C0 = 25% Transparan
80 = 50% Transparan
40 = 75% Transparan
00 = 100% Transparan

Penambahan kode tersebut diletakan di depan kode utama kalian.

Contoh kode utama adalah #ffffff (warna putih)

Tambahkan kode C0 = 25% Transparant >>  #C0ffffff

Tambahkan kode 80 = 50% Transparant >>  #80ffffff
Tambahkan kode 40 = 75% Transparant >> #40ffffff
Tambahkan kode 00 = 100% Transparant >> #00ffffff

Nah kalian dapat memilih salah satu cara yang sesuai dengan kebutuhan Anda. Untuk kasus saya pribadi, saya memilih RGBA dengan alasan itu merupkan kode bawaan dari template  yang saya gunakan.

Cara menggunakan kode warna css transparan RGBA


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
Diposting oleh: DhedyKurnia Seorang yang menyukai Dunia Teknologi, Internet dan Search Engine Optimization.
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