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 memberikan transparansi pada elemen HTML, sedangkan baik RGBa dan HSLa memberikan transparansi pada warna. Karena 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 dan HSLa suatu warna, kita bisa menggunakan website color picker, atau aplikasi design grafis seperti photoshop, corelDRAW, aplikasi windows paint dan lain sebagainya. silakan di 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 adalah kadar warna merah pada suatu warna yang akan kita berikan pada sebuah elemen HTML. Green adalah kadar warna hijau pada suatu warna yang akan kita berikan pada sebuah elemen HTML. Blue adalah kadar warna biru pada suatu warna yang akan kita berikan pada sebuah elemen HTML. Sedangkan Alpha adalah tingkat transparansi suatu warna yang akan kita berikan pada elemen HTML. Nilai RGBa memiliki 4 parameter yang harus diisi ketika kita menggunakan nilai untuk property color.
Dengan menggunakan nilai RGBa tidak akan mempengaruhi opacity element childnya. Sebagai contoh apabila kita ingin memberi opacity pada element parentnya si kotak kuning, maka elemen childnya si kotak merah tidak akan terpengaruh dengan nilai opacity yang diberikan pada 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 dari Hue, Saturation, Lightness, dan Alpha. Hue adalah warna sesungguhnya. Banyak yang bilang hue ini adalah roda warna. Sebagai contoh apabila warna merah dan biru bercampur maka akan menghasilkan warna ungu. Warna ungu ini lah yang disebut dengan warna hue. Jadi warna hue adalah warna sesungguhnnya namun bukan warna utama. Saturation adalah adalah tingkat intensitas suatu warna atau nilai kejenuhannya. Nilai saturation antara 0% - 100%. semakin 0% warnanya akan semakin jenuh, dan semakin mendekati 100% warnanya akan semakin menunjukan intensitas warna yang sesungguhnnya. Lightness adalah gelap terangnya suatu warna. Sedangkan Alpha adalah tingkat transparansi suatu warna. Penggunaan HSLa menggunakan 4 parameter tersebut. penggunaan sama dengan menggunakan RGBa hanya nilainya saja yang berbeda. silakan lihat contoh dibawah ini, sama dengan sintak diatas untuk 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 untuk pembahasan mengenai bagaimana menggunakan nilai RGBa
dan HSLa untuk property css color, background dan background color untuk
mengatasi inheritance pada penggunaan property CSS3 opacity. Semoga bisa jadi
catatan yang bisa dimengerti.
Happy blogging gaess 😉😉😉...
Post a Comment for "Mengenal Model Warna RGBa dan HSLa Pada CSS3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan