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.

Berikut tahapan membuat opacity dengan memakai pelaksanaan photoshop sebelum ada CSS3:

1. Buka aplikasi photoshop

dua. Buka object gambar yg ingin kita berikan opacity dalam bagian atas layer option. Atau kita mampu memakai shape tool pada bagian tool box bila kita ingin menciptakan sebuah object misalnya pada gambar di atas lalu kita atur nilai opacitynya menggunakan menggunakan slider opacity atau eksklusif mengisi nilai opacity di dalam kolom opacity tadi.

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

4. Simpan dalam website, dan biarkan nilai property background repeatnya sebagai 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 laman browser. Sekarang kotak kuning nya sudah transparan. Tetapi menaruh opacity seperti ini akan tidak simpel, saat kita nir cocok memberikan nilai transparansi sebuah elemen. Kita wajib mengatur taraf opacitynya lagi menggunakan memakai photoshop, lalu save lagi gambar, baru kita coba save pulang dalam halaman website, seperti dalam 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 menggunakan property css background color. Hanya dengan satu baris kode, kita bisa mengatur berulang-ulang kali taraf opaciy menggunakan gampang misalnya model dibawah ini, dan pastinya tanpa wajib menggunakan bantuan gambar. Karena gambar pula akan menghipnotis kecepatan load sebuah gambar. Silakan lihat model sintaknya pada bawah ini. Hasilnya akan sama menggunakan tampilan page browser misalnya pada 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 sanggup memakai nilai 0 ? 1. Nilai ini sama dengan 0% -100% waktu kita menggunakan aplikasi photoshop. Nilai 1 sama dengan nilai 100%. Nilai opacity yang mendekati angka 0, maka akan menciptakan sebuah elemen HTML sebagai akan lebih transparan atau tembus pandang. Bahkan ketika telah mencapai nomor 0, akan sebagai nir kelihatan sama sekali. Sedangkan nilai opacity yang mendekati nomor 1 berperilaku sebaliknya, nir akan membuat sebuat elemen HTML menampakan ke transparansinya. Bahkan waktu bernilai 1 maka sama sekali nir akan membuat sebuah elemen HTML transparan. Opacity memakai satuan nilai persentasi. Untuk penulisan nilai opacity ini, kita mampu memakai dua cara. Kita mampu memakai angka 0 atau tanpa angka 0 sebelum tanda decimal. Seperti contoh dibawah ini:

? 0, 0.1, 0.Dua, 0.3, 0.4, 0.Lima, 0.6, 0.7, 0.8, 0.9, 1

? .1, .Dua, .Tiga, .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>

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 😉😉😉 ...