Dito PriwantoSetelah pada seri Belajar CSS Bagian 19 kita mempelajari cara mengatur height dan width pada elemen, kini kita masuk ke konsep baru yang tidak kalah penting dalam desain antarmuka, yaitu CSS Transparency. Transparansi memungkinkan Anda mengatur tingkat kejernihan atau opacity pada elemen, sehingga tampilan website dapat terlihat lebih dinamis, modern, dan estetik.
Dalam desain tampilan web modern, efek visual sangat penting diterapkan untuk menciptakan tampilan yang menarik bagi pengunjung. Salah satu efek visual yang akan kita bahas adalah efek transparan.
Properti CSS yang dapat digunakan untuk menggunakan efek transparan yaitu property opacity atau transparansi dan background-color menggunakan warna transparan.
Pada bagian ke-20 ini, kita akan belajar mengenal lebih jauh tentang CSS Transparency, fungsinya, serta contoh penggunaannya agar Anda dapat menerapkannya dengan mudah dalam proyek web Anda.
Apa Itu Property CSS Opacity?
Property opacity adalah properti CSS yang dapat digunakan untuk mengubah tingkat transparansi suatu elemen HTML, sehingga dapat memberikan efek visual seperti menyatu dengan background, atau memberikan efek bayangan, atau fokus di elemen html tertentu.
Secara default, semua elemen memiliki nilai 1. Dengan mengubah nilai ini hingga mendekati 0, maka elemen HTML akan terlihat semakin transparan.
Contoh kode penulisan :
.box {
opacity: 0.5; /*elemen akan menjadi 50% transparan*/
}Cara Kerja CSS Opacity
Properti CSS opacity bekerja dengan mengatur tingkat transparansi suatu elemen HTML, termasuk seluruh konten di dalamnya seperti teks, gambar, dan elemen turunan lainnya. Nilai opacity menggunakan angka desimal antara 0 hingga 1.
- opacity: 1 > elemen sepenuhnya terlihat (tidak transparan).
- opacity: 0.5 > elemen setengah transparan.
- opacity: 0 > elemen sepenuhnya tidak terlihat (transparan).
Contoh Implementasi dan penggunaan
Tidak jauh berbeda dengan script CSS mengenai box model, berikut adalah contoh script lengkap penggunaan CSS opacity yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Transparansi</title>
<style>
.container {
display: flex;
justify-content: center;
}
.container div {
margin: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #dadada;
border-radius: 10px;
}
.container .box-1 {
width: 100px;
max-width: 100px;
height: 100px;
max-height: 100px;
opacity: 0.2;
}
.container .box-2 {
width: 100px;
max-width: 100px;
height: 150px;
max-height: 150px;
opacity: 0.4;
}
.container .box-3 {
width: 200px;
max-width: 200px;
height: 200px;
max-height: 200px;
opacity: 0.6;
}
.container .box-4 {
width: 200px;
max-width: 200px;
height: 350px;
max-height: 350px;
opacity: 0.8;
}
body {
background-image: url(pindah-hosting.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1">Box Satu</div>
<div class="box-2">Box Dua</div>
<div class="box-3">Box Tiga</div>
<div class="box-4">Box Empat</div>
</div>
</body>
</html>Jika diakses menggunakan browser, maka akan menampilkan hasil sebagai berikut:
Transparansi Menggunakan Property background-color
Selain menggunakan CSS opacity, Anda juga dapat menggunakan property CSS background-color dan ubah warnanya menjadi transparan. Informasi lebih lengkap mengenai property background color dapat di pelajari di artikel berikut Menggunakan Background di CSS
Berikut adalah contoh property CSS background-color.
.container div {
background-color: #ffffff9e; /*warna transparany*/
}Anda dapat menentukan warna menggunakan fitur inspect element yang sudah di sediakan oleh browser seperti gambar di bawah.
BACA JUGA : Kode Warna HTML dan CSS yang Perlu Anda Ketahui
Membuat Tampilan Seperti Desain Kaca (Glass Design)
Glass Morphism adalah teknik desain yang membuat efek visual transparan seperti kaca. Untuk membuat efek ini, Anda bisa menggunakan properti CSS backdrop-filter. Pastikan Anda juga mengatur transparansi dengan properti background-color.
Properti backdrop-filter memungkinkan Anda menerapkan efek visual seperti blur atau perubahan warna pada area di belakang elemen.
Anda cukup menambahkan kode css berikut :
.container div {
background-color: #ffffff9e;
border: 1px solid #ffffff9e;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
backdrop-filter: blur(13.6px);
-webkit-backdrop-filter: blur(13.6px);
}Berikut adalah contoh script lengkap penggunaan glass design yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Transparansi</title>
<style>
.container {
display: flex;
justify-content: center;
}
.container div {
margin: 10px;
padding: 10px;
background-color: #ffffff9e;
border: 1px solid #ffffff9e;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
backdrop-filter: blur(13.6px);
-webkit-backdrop-filter: blur(13.6px);
}
.container .box-1 {
width: 100px;
max-width: 100px;
height: 100px;
max-height: 100px;
}
.container .box-2 {
width: 100px;
max-width: 100px;
height: 150px;
max-height: 150px;
}
.container .box-3 {
width: 200px;
max-width: 200px;
height: 200px;
max-height: 200px;
}
.container .box-4 {
width: 200px;
max-width: 200px;
height: 350px;
max-height: 350px;
}
body {
background-image: url(pindah-hosting.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1">Box Satu</div>
<div class="box-2">Box Dua</div>
<div class="box-3">Box Tiga</div>
<div class="box-4">Box Empat</div>
</div>
</body>
</html>Jika diakses menggunakan browser, maka akan menampilkan halaman sebagai berikut:
Kapan Menggunakan Efek Transparansi?
Efek transparansi hanya dapat digunakan untuk elemen tertentu saja yang sekiranya terlihat menarik dan profesional. Berikut beberapa kondisi secara umum kapan efek transparansi digunakan:
- Membuat efek transparan pada gambar background.
- Memberikan efek animasi transparan ketika mouse masuk ke elemen atau sebaliknya (fade-in/fade-out).
- Memberikan efek transparan di bagian menu.
- Membuat efek transparan di bagan elemen box / card.
- Membuat popup yang memiliki tampilan efek transparan.
Perlu diingat, tidak semua elemen cocok diberi efek transparansi. Penggunaan yang berlebihan dapat membuat tampilan website menjadi berantakan dan elemen-elemen saling bertabrakan secara visual. Oleh karena itu, gunakan efek transparansi secukupnya dan hanya pada elemen yang memang perlu terlihat transparan.
Penutup
Dalam desain web modern, efek visual memiliki peran penting untuk menciptakan tampilan yang menarik dan profesional. Untuk membuat efek transparan, Anda bisa menggunakan dua properti CSS, yaitu opacity dan background-color.
Opacity berfungsi untuk mengatur tingkat transparansi elemen secara keseluruhan, sedangkan background-color berfungsi untuk membuat efek transparansi melalui kode warna. Dengan menguasai kedua properti ini, Anda dapat menciptakan desain website yang lebih modern dan eye-catching.
Demikian seri belajar CSS bagian 20 tentang CSS Transparency. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat mencoba 🙂
