Belajar CSS3 fitur baru pada warna

belajar css

Fitur baru warna pada CSS3

CSS3 menambahkan beberapa jenis warna baru yang bisa Anda gunakan untuk pengaturan nilai warna pada elemen. Jenis warna baru pada css3 yaitu: rgba, hsl dan hsla. Terkait seputar warna atau color yang lainnya Anda bisa baca kembali CSS dasar seputar color.

Nilai warna RGBA

Nilai warna RGBA kepanjangan dari (Red, Green, Blue, Alpha). Model warna RGBA perpanjangan dari model warna RGB yang ditambahkan alpha channel, alpha sendiri menentukan opacity atau tingkat transparan pada warna. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).

Contoh:

Editor Online
  1. #p1 {
  2. background-color: rgba(0, 0, 255, 0.2);
  3. }
  4. #p2 {
  5. background-color: rgba(0, 0, 255, 0.4);
  6. }
  7. #p3 {
  8. background-color: rgba(0, 0, 255, 0.6);
  9. }
  10. #p4 {
  11. background-color: rgba(0, 0, 255, 0.8);
  12. }
  13. #p5 {
  14. background-color: rgba(0, 0, 255, 1.0);
  15. }

Nilai warna HSL

Nilai warna HSL kepanjangan dari (Hue, Saturation, Lightness).

Hue adalah gelar pada roda warna dari 0 hingga 360. 0 berwarna merah atau red, 120 berwarna hijau atau green, dan 240 berwarna biru atau blue.

Saturation adalah nilai persentase, 0% berarti warna abu-abu atau grey, dan 100% adalah warna penuh.

Lightness juga persentase, 0% hitam atau black, 50% tidak terang atau gelap, 100% putih atau white

Contoh:

Editor Online
  1. #p1 {
  2. background-color: hsl(0, 100%, 50%);
  3. }
  4. #p2 {
  5. background-color: hsl(60, 100%, 50%);
  6. }
  7. #p3 {
  8. background-color: hsl(120, 100%, 25%);
  9. }
  10. #p4 {
  11. background-color: hsl(240, 100%, 50%);
  12. }
  13. #p5 {
  14. background-color: hsl(0, 0%, 0%);
  15. }

Nilai warna HSLA

Nilai warna HSLA kepanjangan dari (Hue, Saturation, Lightness, Alpha). Model warna HSLA perpanjangan dari model warna HSL yang ditambahkan alpha channel, alpha sendiri menentukan opacity atau tingkat transparan pada warna. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).

Contoh:

Editor Online
  1. #p1 {
  2. background-color: hsla(39, 100%, 50%, 0.2);
  3. }
  4. #p2 {
  5. background-color: hsla(39, 100%, 50%, 0.4);
  6. }
  7. #p3 {
  8. background-color: hsla(39, 100%, 50%, 0.6);
  9. }
  10. #p4 {
  11. background-color: hsla(39, 100%, 50%, 0.8);
  12. }
  13. #p5 {
  14. background-color: hsla(39, 100%, 50%, 1.0);
  15. }

Leave a Reply

Your email address will not be published. Required fields are marked *