CSS3 Warna
CSS mendukung nama warna, heksadesimal dan warna RGB.
Selain itu, CSS3 juga memperkenalkan:
- Warna RGBA
- Warna HSL
- Warna HSLA
- opacity
RGBA Warna
Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity untuk warna.
Sebuah nilai warna RGBA ditentukan dengan: RGBA (merah, hijau, biru, alpha). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (penuh buram).
Contoh berikut mendefinisikan warna RGBA yang berbeda:
.ex1{
background-color: rgba(255, 0, 0, 0.3);
}
.ex2 {
background-color: rgba(0, 255, 0, 0.3);
}
HSL Warna
HSL singkatan Hue, Saturation dan Lightness.
Sebuah nilai warna HSL ditentukan dengan: HSL (hue, saturation, Lightness).
- Hue adalah gelar pada roda warna (0-360):
- 0 (atau 360) merah
- 120 hijau
- 240 adalah biru
- Saturasi adalah nilai persentase: 100% adalah penuh warna.
- Lightness juga persentase; 0% gelap (hitam) dan 100% putih.
Contoh berikut mendefinisikan warna HSL yang berbeda:
.ex1{
background-color: hsl(120, 100%, 50%);
}
.ex2 {
background-color: hsl(120, 100%, 75%);
}
HSLA Warna
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk warna.
Sebuah nilai warna HSLA ditentukan dengan: HSLA (hue, saturation, Lightness, alpha), dimana parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (penuh buram).
Contoh berikut mendefinisikan warna HSLA yang berbeda:
.ex1{
background-color: hsla(120, 100%, 50%, 0.3);
}
.ex2 {
background-color: hsla(120, 100%, 75%, 0.3);
}
Opacity
Properti CSS3 opacity set opacity untuk nilai RGB yang ditentukan.
Nilai properti opacity harus angka antara 0,0 (sepenuhnya transparan) dan 1,0 (penuh buram).
Contoh berikut menunjukkan nilai-nilai RGB yang berbeda dengan opacity:
.ex1{
background-color: rgb(255,0,0);
opacity: 0.6;
}
.ex2 {
background-color: rgb(0,255,0);
opacity: 0.6;
}
0 komentar:
Posting Komentar