Opacity
Opacity adalah properti CSS yang menentukan seberapa transparan atau tidak transparan suatu elemen HTML dan kontennya. Dengan mengatur opacity, Anda dapat mengubah tingkat transparansi dari elemen tersebut.
Cara Menggunakan Opacity dalam HTML dan CSS:
Misalkan kita ingin membuat sebuah kotak dengan teks di dalamnya yang memiliki tingkat transparansi tertentu. Berikut adalah contoh penggunaan HTML dan CSS untuk mencapai hal tersebut:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Opacity CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">
<p>Ini adalah teks di dalam kotak dengan opacity.</p>
</div>
</div>
</body>
</html>
CSS (styles.css):
/* Menerapkan gaya dasar */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Menerapkan gaya untuk kontainer */
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
/* Menerapkan gaya untuk kotak */
.box {
width: 200px;
height: 200px;
background-color: #3498db;
padding: 20px;
border-radius: 10px;
/* Mengatur tingkat transparansi */
opacity: 0.5;
}
/* Menerapkan gaya untuk teks di dalam kotak */
.box p {
color: white;
font-size: 18px;
text-align: center;
}
Dalam contoh di atas, kita memiliki sebuah kotak dengan teks di dalamnya. Properti opacity diatur pada nilai 0.5, yang berarti kotak tersebut akan memiliki tingkat transparansi sebesar 50%. Dengan demikian, elemen kotak dan kontennya akan sedikit terlihat melalui lapisan transparan. Anda dapat menyesuaikan nilai opacity untuk mencapai efek transparansi yang diinginkan.
Dengan menggunakan opacity, Anda dapat menciptakan berbagai efek visual menarik, seperti overlay, efek fade-in dan fade-out, serta penekanan pada elemen-elemen tertentu dalam tata letak halaman web Anda.
