tutorial pengembangan web terbaru
 

CSS warna

❮ Sebelumnya Berikutnya Bab ❯

Warna CSS3

CSS mendukung nama warna, heksadesimal dan warna RGB.

Selain itu, CSS3 juga memperkenalkan:

  • warna RGBA
  • warna HSL
  • warna HSLA
  • kegelapan

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung nilai-nilai warna CSS3 / properti.

Milik
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
kegelapan 4.0 9.0 2.0 3.1 10.1

Warna RGBA

RGBA nilai warna merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity untuk warna.

Nilai warna RGBA ditentukan dengan: RGBA (merah, hijau, biru, alpha ). The alpha parameter adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sangat lengkap).

RGBA (255, 0, 0, 0,2);
RGBA (255, 0, 0, 0,4);
RGBA (255, 0, 0, 0,6);
RGBA (255, 0, 0, 0,8);

Contoh berikut mendefinisikan warna RGBA yang berbeda:

Contoh

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Cobalah sendiri "

Warna HSL

HSL singkatan Hue, Saturation dan Lightness.

Nilai warna HSL ditentukan dengan: HSL (hue, saturation, ringan).

  1. Hue adalah gelar pada roda warna (dari 0 sampai 360):
    • 0 (atau 360) merah
    • 120 hijau
    • 240 berwarna biru
  2. Saturasi adalah nilai persentase: 100% adalah penuh warna.
  3. Lightness juga persentase; 0% gelap (hitam) dan 100% adalah putih.
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

Contoh berikut mendefinisikan warna HSL yang berbeda:

Contoh

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Cobalah sendiri "

Warna HSLA

HSLA nilai warna merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk warna.

Nilai warna HSLA ditentukan dengan: HSLA (hue, saturation, ringan, alpha ), dimana alpha parameter mendefinisikan opacity. The alpha parameter adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sangat lengkap).

HSLA (0, 100%, 30%, 0,3);
HSLA (0, 100%, 50%, 0,3);
HSLA (0, 100%, 70%, 0,3);
HSLA (0, 100%, 90%, 0,3);

Contoh berikut mendefinisikan warna HSLA yang berbeda:

Contoh

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Cobalah sendiri "

Kegelapan

Properti CSS3 opacity set opacity untuk nilai RGB yang ditentukan.

Nilai properti opacity harus berupa angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sangat lengkap).

rgb (255, 0, 0); opacity: 0.2;
rgb (255, 0, 0); opacity: 0.4;
rgb (255, 0, 0); opacity: 0.6;
rgb (255, 0, 0); opacity: 0.8;

Perhatikan bahwa teks di atas juga akan buram.

Contoh berikut menunjukkan nilai-nilai RGB yang berbeda dengan opacity:

Contoh

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»


❮ Sebelumnya Berikutnya Bab ❯