Opacity Pada CSS3

Opacity Pada CSS3 – Property CSS3 opacity berguna untuk mengatur transparansi sebuah elemen. Transparansi ini hanya untuk elemen html, opacity tidak peduli elemennya berupa gambar, tag <div> atau apa saja. Dulu sebelum ada CSS3 kita bisa mengatur tingkat transparansi sebuah elemen dengan menggunakan aplikasi design grafis seperti photoshop setelah itu baru kita simpan dalam website.

membuat opacity pada aplikasi desain grafis photoshop

Berikut tahapan membuat opacity dengan menggunakan aplikasi photoshop sebelum ada CSS3:

1. Buka aplikasi photoshop

2. Buka object gambar yang ingin kita berikan opacity pada bagian atas layer option. Atau kita bisa menggunakan shape tool pada bagian tool box apabila kita ingin membuat sebuah object seperti pada gambar di atas lalu kita atur nilai opacitynya dengan menggunakan slider opacity atau langsung mengisi nilai opacity di dalam kolom opacity tersebut.

3. Setelah itu crop kecil bagian dari object tersebut. Selanjutnya save dari hasil crop tersebut.

4. Simpan dalam website, dan biarkan nilai property background repeatnya menjadi default yaitu repeat. Seperti contoh sintak dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Opacity Dengan Photoshop</title>
 <style>
  body {
   background-image: url(img/leaf.png);
  }
  div {
   width: 400px;
   height: 400px;
   background-image: url(img/kotak.png);
  }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

Lihat hasil di atas pada halaman browser. Sekarang kotak kuning nya sudah transparan. Namun memberikan opacity seperti ini akan tidak praktis, ketika kita tidak cocok memberikan nilai transparansi sebuah elemen. Kita harus mengatur tingkat opacitynya lagi dengan menggunakan photoshop, kemudian save lagi gambar, baru kita coba save kembali pada halaman website, seperti pada contoh sintak diatas. Hal ini akan tentu saja akan sangat merepotkan ketika kita harus mengaturnya berulang-ulang kali. Dengan property CSS3 opacity kita akan mengurangi penggunaan gambar karena penggunaan gambar seperti contoh sintak di atas akan digantikan dengan property css background color. Hanya dengan satu baris kode, kita bisa mengatur berulang-ulang kali tingkat opaciy dengan mudah seperti contoh dibawah ini, dan pastinya tanpa harus menggunakan bantuan gambar. Karena gambar juga akan mempengaruhi kecepatan load sebuah gambar. Silakan lihat contoh sintaknya di bawah ini. hasilnya akan sama dengan tampilan halaman browser seperti di atas.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Opacity Dengan CSS3</title>
 <style>
  body {
   background-image: url(img/leaf.png);
  }
  div {
   width: 400px;
   height: 400px;
   background-color: #fdf50f;
   opacity: .60;
  }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

Tentang penggunaan nilai property CSS3 opacity, kita bisa menggunakan nilai 0 – 1. Nilai ini sama dengan 0% -100% ketika kita menggunakan aplikasi photoshop. nilai 1 sama dengan nilai 100%. Nilai opacity yang mendekati angka 0, maka akan membuat sebuah elemen HTML menjadi akan lebih transparan atau tembus pandang. Bahkan ketika sudah mencapai angka 0, akan menjadi tidak kelihatan sama sekali. Sedangkan nilai opacity yang mendekati angka 1 berperilaku sebaliknya, tidak akan membuat sebuat elemen HTML memperlihatkan ke transparansinya. Bahkan ketika bernilai 1 maka sama sekali tidak akan membuat sebuah elemen HTML transparan. Opacity menggunakan satuan nilai persentasi. Untuk penulisan nilai opacity ini, kita bisa menggunakan 2 cara. Kita bisa menggunakan angka 0 atau tanpa angka 0 sebelum tanda decimal. Seperti contoh dibawah ini:

● 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1

● .1, .2, .3, .4, .5, .6, .7, .8, .9, 1

div {
   width: 400px;
   height: 400px;
   background-color: #fdf50f;
   opacity: 0.60;
  }

div {
   width: 400px;
   height: 400px;
   background-color: #fdf50f;
   opacity: .60;
  }

Opacity & Inheritance

Bicara mengenai opacity ada catatan yang sebaiknya kita perhatikan. Saya pernah membahas mengenai inheritance. Sebuah konsep yang membahas pewarisan sifat dan perilaku sebuah elemen HTML yang menjadi parent atau pembungkusnya akan mewarisi perilaku yang sama kepada elemen childnya. Pada penggunaan property CSS3 opacity ini juga memiliki perilaku inheritance. Silakan lihat contoh dibawah. Ketika kita membuat kotak kuning dengan opacity 60%, maka kotak yang berada dalam kotak kuning tersebut ( kotak merah ) juga akan tampil dengan tingkat transparansi 60% yang sama dengan kotak kuning sebagai elemen parent/pembungkusnya meskipun kita tidak memberikan nilai opacity pada kotak merah tersebut. Artinya kotak merah tersebut sebenarnya memiliki nilai opacity 1 atau 100%. Karena kotak kuning memiliki nilai opacity, maka kotak merah mewarisi transparansi dari kotak kuningnya. Ini lah contoh inherintance pada opacity.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Opacity Dengan CSS3</title>
 <style>
  body {
   background-image: url(img/leaf.png);
  }
  .kotak1 {
   width: 400px;
   height: 400px;
   background-color: #fdf50f;
   opacity: .60;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: #fd0f36;
  }
 </style>
</head>
<body>
 <div class="kotak1">
  <div class="kotak2"></div>
 </div>
</body>
</html>

contoh penggunaan konsep opacity dan inheritance

Lihat contoh lain implementasi konsep inheritance pada opacity :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Opacity Dengan CSS3</title>
 <style>
  body {
   background-image: url(img/leaf.png);
  }
  .kotak1 {
   width: 400px;
   height: 400px;
   background-color: #fdf50f;
   opacity: .50;
   position: relative;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: #fd0f36;
   position: absolute;
   left: 300px;
   top: 300px;
   opacity: 0.50;
  }
 </style>
</head>
<body>
 <div class="kotak1">
  <div class="kotak2"></div>
 </div>
</body>
</html>

Kotak merah di dalam kotak kuning, pada sintak di halaman HTML diberi opacity 50% agar si kotak merah bisa transparan dengan kotak kuning sebagai parentnya. Sedangkan parentnya si kotak kuning diberi opacity 50% juga. logikanya kalau dijumlahkan nilai opacity dari kotak merah harusnya 100% dan harusnya si kotak merah tidak kelihatan. Sebenarnya yang terjadi si kotak merah telah mewarisi opacity dari parentnya 50%, dan si kotak merah sendiri memiliki opacity 50% dari 50% elemen parentnya si kotak kuning. Jadi sebenarnya si kotak merah memiliki nilai opacity sebanyak 25%.

Lalu bagaimana kalau kita ingin memberikan nilai opacity yang berbeda tanpa harus terpengaruh dengan implementadi default dari konsep inheritance pada css. Solusinya kita bisa menggunakan nilai property css ‘rgba()’ dan ‘hsla()’ yang kita berikan pada property css color, background dan background color. Kita perlu memahami 2 nilai rgba() dan hsla() tersebut, karena untuk penggunaan property css opacity adalah untuk memberikan transparansi pada elemen HTML sehingga konsep inheritance berlaku.

Ok sekian untuk penjelasan mengenai opacity, semoga catatan ini mudah di pahami buat my lovely readers.

Happy blogging guys 😉😉😉 ...