Mengenal Model Warna RGBa dan HSLa Pada CSS3

Mengenal Model Warna RGBa dan HSLa Pada CSS3 – Artikel ini melanjutkan artikel sebelumnya mengenai opacity, karena pada implementasi penggunaan opacity kita terkendala ketika kita memberikan opacity pada sebuah elemen parent/element pembungkus maka juga akan mewarisi style opacity yang diberikan kepada elemen child atau element anaknya. Pada CSS3 kita bisa memberikan nilai sebuah property css dengan nilai RGBa dan HSLa. Nilai tersebut kita bisa berikan untuk property color, background dan background color. Untuk image kita tidak bisa memberikan nilai RGBa dan HSLa karena image tidak memiliki color.

Harap dicatat bahwa opacity menaruh transparansi dalam elemen HTML, sedangkan baik RGBa dan HSLa memberikan transparansi dalam rona. Lantaran itu penggunaan property CSS3 RGBa dan HSLa tidak akan mempengaruhi transparansi elemen childnya. Beda dengan penggunaan property CSS3 opacity akan mempengaruhi opacity elemen childnya.

Untuk nilai RGBa & HSLa suatu warna, kita mampu menggunakan website color picker, atau aplikasi design grafis misalnya photoshop, corelDRAW, pelaksanaan windows paint & lain sebagainya. Silakan pada coba ya...

Pemberian warna pada suatu elemen HTML kita bisa menggunakan property yang berhubungan dengan property color. Property color baik itu property color, background, background color bisa diberikan warna dengan menggunakan nilai berupa bilangan hexadecimal, nama warna dalam bahasa inggris, nilai RGBa, dan nilai HSLa. Dalam artikel ini akan khusus membahas mengenai 2 nilai RGBa dan HSLa.

RGBa sendiri adalah kepanjangan dari Red, Green, Blue, Alpha. Red merupakan kadar warna merah pada suatu rona yang akan kita berikan pada sebuah elemen HTML. Green merupakan kadar rona hijau pada suatu rona yg akan kita berikan pada sebuah elemen HTML. Blue adalah kadar warna biru dalam suatu warna yg akan kita berikan dalam sebuah elemen HTML. Sedangkan Alpha merupakan tingkat transparansi suatu rona yg akan kita berikan dalam elemen HTML. Nilai RGBa mempunyai 4 parameter yg harus diisi waktu kita menggunakan nilai buat property color.

Dengan menggunakan nilai RGBa nir akan mensugesti opacity element childnya. Sebagai contoh apabila kita ingin memberi opacity dalam element parentnya si kotak kuning, maka elemen childnya si kotak merah nir akan terpengaruh menggunakan nilai opacity yang diberikan dalam elemen parentnya. Silakan lihat contoh sintaknya dibawah ini :

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Opacity Dengan RGBa</title> <style> body { background-image: url(img/leaf.png); } .kotak1 { width: 400px; height: 400px; background-color: rgba(253, 245, 15, .60); position: relative; } .kotak2 { width: 200px; height: 200px; background-color: #c00881; position: absolute; left: 300px; top: 300px; } </style> </head> <body> <div class="kotak1"> <div class="kotak2"></div> </div> </body> </html>

HSLa kepanjangan menurut Hue, Saturation, Lightness, & Alpha. Hue merupakan rona sesungguhnya. Banyak yang bilang hue ini merupakan roda warna. Sebagai contoh jika warna merah & biru bercampur maka akan membentuk warna ungu. Warna ungu ini lah yg diklaim menggunakan rona hue. Jadi rona hue adalah warna sesungguhnnya tetapi bukan warna primer. Saturation adalah merupakan taraf intensitas suatu warna atau nilai kejenuhannya. Nilai saturation antara 0% - 100%. Semakin 0% warnanya akan semakin jenuh, & semakin mendekati 100% warnanya akan semakin menandakan intensitas rona yg sesungguhnnya. Lightness merupakan gelap terangnya suatu warna. Sedangkan Alpha adalah tingkat transparansi suatu warna. Penggunaan HSLa menggunakan 4 parameter tadi. Penggunaan sama menggunakan menggunakan RGBa hanya nilainya saja yg tidak sinkron. Silakan lihat contoh dibawah ini, sama menggunakan sintak diatas buat hasilnya.

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Opacity Dengan HSLa</title> <style> body { background-image: url(img/leaf.png); } .kotak1 { width: 400px; height: 400px; background-color: hsla(58, 94%, 68%, 0.60); position: relative; } .kotak2 { width: 200px; height: 200px; background-color: #c00881; position: absolute; left: 300px; top: 300px; } </style> </head> <body> <div class="kotak1"> <div class="kotak2"></div> </div> </body> </html>

Ok sekian buat pembahasan tentang bagaimana memakai nilai RGBa & HSLa buat property css color, background dan background color buat mengatasi inheritance dalam penggunaan property CSS3 opacity. Semoga sanggup jadi catatan yg mampu dimengerti.

Happy blogging gaess ??????...