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.
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.
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.
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:
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.
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
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>
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.
Pakar teknologi yang berpengalaman 10 tahun di bidang: sosial media, gadget, komputer, internet, aplikasi, games dan seluler.
Belum ada Komentar untuk "72 Kode Warna Css Transparan Full Color Tinggal Copy"
Posting Komentar