Bismillahirahmanirahim
Setelah sekian lama ga bikin tutor di JagoCoding, akhirnya saya bikin lagi nih :3. Abis mantepin ilmu tentang web security, jadi maklum vacuum agak lama (ga ada yang nanya
, cuma mau proklamasi). Oke kali ini saya akan mejelaskan tentang membuat background transparan menggunakan CSS RGB Color
Apa Bedanya RGB Sama Opacity?
Walaupun hasilnya hampir sama, tapi beda. RGB itu dia hanya akan mengurangi ketebalan warna di backgroundnya saja. Namun Opacity itu akan mengurangi ketebalan warna di keseluruhan bagian dari area yang di beri CSS Opacity. Masih belum ngerti? kita praktekin aja deh biar ngerti :3
1. Bikin cssnya aja dulu deh
Nih CSSnya yang simpel aja ya gausah ribet ribet
*{
font-size: 12px;
font-family: sans-serif;
}
body{
background:#000000;
margin: 0;
}
h1{
font-size: 36px;
margin: 0;
}
#wrapper{
width: 950px;
margin: auto;
background-color:rgba(255,255,255,0.8);
border-radius: 50px;
}
#header{
height: auto;
background: transparent;
margin-top: 12%;
}
Liat di bagian wrapper itu ada css background-color:rgba(255,255,255,0.8). maksudnya adalah sama aja kaya biasa, cuma kita pake rgb. Terus angka dapet dari mana yang 255,255,255,0.8 itu? Itu adalah gabungan dari ketiga warna, yaitu R untuk Red atau Merah, G untuk Green atau Hijau, dan B untuk Blue atau biru. Biar gampang, kalian bisa search di google dengan keyword "RGBA Color Picker" untuk menemukan warna yang kalian inginkan dalam bentuk RGB.
Kemudian, 0.8 itu bersifat seperti opacity. Semakin besar nilainya, semakin tebal warnanya, semakin kecil nilainya, semakin transparanlah dia. Simpan kode diatas, berinama style.css . Lalu hasilnya gimana? Kita coba aja gabungin dengan HTML Berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>JagoCoding.com</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<center><h1>JagoCoding</h1></center>
</div>
</div>
</body>
</html>
Terlihatkan Hasilnya? :3 dia menjadi agak transparan. Agar lebih jelas lagi, coba body background colornya kalian ubah dengan link image yang kalian ingin, jadi terlihat lebih jelas lagi :3
Oke sekian dari saya, kalo ada yang ingin ditanyakan ya tanyakan saja lewat komentar :3
