Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 21 : Cara Mengatur Multi Background di CSS. Selanjutnya, kita akan mempelajari bagaimana cara menggunakan warna di CSS.
CSS3 telah Mendukung properti warna tambahan sebagai berikut :
- Warna RGBA
- Warna HSL
- Warna HSLA
- Opacity
RGBA adalah singkatan dari Red Green Blue Alpha. Ini adalah ekstensi dari CSS2, Alpha menentukan opasitas warna dan nomor parameter adalah numerik antara 0,0 hingga 1,0. Contoh sintaks RGBA seperti yang ditunjukkan di bawah ini :
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL adalah singkatan dari hue, saturation, lightness. Di sini Huge adalah derajat pada roda warna, saturation dan lightness adalah nilai persentase antara 0 hingga 100%. Contoh sintaks HSL seperti yang ditunjukkan di bawah ini :
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA adalah singkatan dari hue, saturation, lightness dan alpha. Nilai alpha menentukan opacity seperti yang ditunjukkan RGBA. Contoh sintaks HSLA seperti yang ditunjukkan di bawah ini :
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
Opacity adalah warna yang lebih tipis, ditambahkan warna hitam untuk meningkatkan opacity. Contoh sintaks opasitas adalah seperti yang ditunjukkan di bawah ini :
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
Contoh berikut menunjukkan properti warna rgba.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>Warna RGBA :</p>
<p id = "p1">Merah</p>
<p id = "p2">Hijau</p>
<p id = "p3">Biru</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut menunjukkan properti warna HSL.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>Warna HSL :</p>
<p id = "g1">Hijau</p>
<p id = "g2">Hijau Normal</p>
<p id = "g3">Hijau Gelap </p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut menunjukkan properti warna HSLA.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>Warna HSLA :</p>
<p id = "d1">Hijau dengan sedikit opacity </p>
<p id = "d2">Hijau</p>
<p id = "d3">Hijau</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut menunjukkan properti Opacity.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>Warna HSLA :</p>
<p id = "m1">Merah</p>
<p id = "m2">Hijau</p>
<p id = "m3">Biru</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan warna di CSS untuk memperindah dokumen HTML.
