Belajar CSS Part 25 - Opacity

CSS Opacity / Transparency

Properti opacity digunakan untuk menentukan opacity / transparansi dari sebuah elemen.

Berikut merupakan contoh dari penerapan properti opacity untuk menciptakan efek transparansi pada gambar:

Contoh

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity menetapkan transparansi elemen. Semakin rendah nilainya, semakin transparan: </ p>

<p>Gambar dengan 50% opacity:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

</body>
</html>

Hasilnya:

Efek Hover Transparan

Properti opacity sering digunakan bersama-sama dengan selector :hover untuk mengubah opacity pada mouse-over. Mouse-over artinya ketika kita meletakkan mouse / kursor di atas elemen yang diberi efek transparansi, maka elemen tersebut akan berubah efek.

Contoh

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnyar */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

<p><b>Catatan: </b>Di IE, sebuah !DOCTYPE harus ditambahkan untuk selector :hover untuk bekerja pada elemen lain dari sebuah elemen</ p>

</body>
</html>

Hasilnya:

Berikut merupakan contoh penerapan efek hover terbalik:

Contoh

img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

<p><b>Catatan: </b>Di IE, sebuah !DOCTYPE harus ditambahkan untuk selector :hover untuk bekerja pada elemen lain dari sebuah elemen</ p>

</body>
</html>

Hasilnya:

Transparent Box (Kotak transparan)

Transparansi Menggunakan Opacity
Bila menggunakan properti opacity untuk menambahkan transparansi untuk latar belakang sebuah elemen, maka semua elemen yang ada di dalam elemen tersebut akan mewarisi transparansi yang sama. Hal ini dapat membuat teks di dalam elemen sepenuhnya transparan sehingga sulit untuk dibaca.

Contoh

div {
    background-color: #3399ff;
    padding: 10px;
}

div.first {
    opacity: 0.1;
    filter: alpha(opacity=10); /* Untuk IE8 and versi sebelumnya */
}

div.second {
    opacity: 0.3;
    filter: alpha(opacity=30); /* Untuk IE8 and versi sebelumnya */
}

div.third {
    opacity: 0.6;
    filter: alpha(opacity=60); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Kotak Transparan</h1>
<p>Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang elemen, semua elemen turunannya menjadi transparan juga. Ini dapat membuat teks di dalam elemen transparan sepenuhnya sulit dibaca: </p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Hasilnya:

Catatan: Perhatikan bahwa teks menjadi transparan seperti warna latar belakang saat menggunakan properti opacity.

Transparansi menggunakan RGBA

Jika kita tidak ingin menerapkan opacity ke isi dari elemen, seperti dalam contoh kita di atas, gunakan nilai warna RGBA.

Contoh berikut menetapkan opacity untuk warna latar belakang dan tidak teks:

Contoh

div {
    background: rgb(0,153,255);
    padding: 10px;
}

div.first {
    background: rgba(0,153,255,0.1);
}

div.second {
    background: rgba(0,153,255,0.3);
}

div.third {
    background: rgba(0,153,255,0.5);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Kotak Transparan</h1>
<h3>Menggunakan opacity:</h3>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<h3>Menggunakan nilai warna RGBA:</h3>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Perhatikan bagaimana teks menjadi transparan serta warna latar belakang saat menggunakan properti opacity. </ p>

</body>
</html>

Hasilnya:

Catatan: Menggunakan nilai warna RGBA menampilkan hasil yang berbeda dengan menggunakan opacity.

Sebuah nilai warna RGBA ditentukan dengan: RGBA (merah, hijau, biru, alpha ). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

Teks dalam Kotak Transparan

Berikut merupakan langkah-langkah membuat teks transparan dalam sebuah kotak:
* Membuat elemen <div> (class="background") dengan gambar latar belakang dan sebuah border.
* Membuat <div> lain (class="transbox") dalam <div> pertama. <div class="transbox"> memiliki warna latar belakang dan sebuah border. Div ini adalah div transparan.
* Di dalam <div> transparan, kita menambahkan beberapa teks tepatnya di dalam elemen <p>.

Contoh

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* Untuk IE8 and versi sebelumnya */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Ini adalah sebuah teks yang menempati kotak transparan.</p>
  </div>
</div>

</body>
</html>

Hasilnya: