Gli ultimi tutorial di sviluppo web
 

CSS Colori

❮ Precedente Successivo Capitolo ❯

CSS3 Colori

CSS supporta i nomi dei colori, esadecimale e colori RGB.

Inoltre, CSS3 introduce anche:

  • colori RGBA
  • colori HSL
  • colori HSLA
  • opacità

Supporto per il browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente i valori dei colori CSS3 / proprietà.

Proprietà
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacità 4.0 9.0 2.0 3.1 10.1

RGBA Colori

Valori di colore RGBA sono un'estensione dei valori di colore RGB con un alpha channel - che specifica l'opacità di un colore.

Un valore di colore RGBA viene specificato con: RGBA (rosso, verde, blu, alpha ). L' alpha parametro è un numero compreso tra 0.0 (completamente trasparente) e 1,0 (completamente opaco).

RGBA (255, 0, 0, 0,2);
RGBA (255, 0, 0, 0.4);
RGBA (255, 0, 0, 0,6);
RGBA (255, 0, 0, 0.8);

L'esempio seguente definisce diversi colori RGBA:

Esempio

#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 */
Prova tu stesso "

HSL Colori

HSL sta per Tonalità, Saturazione e Luminosità.

Un valore di colore HSL viene specificato con: HSL (tonalità, saturazione, luminosità).

  1. Hue è un grado sulla ruota dei colori (da 0 a 360):
    • 0 (o 360) è rosso
    • 120 è verde
    • 240 è blu
  2. La saturazione è un valore percentuale: 100% è il colore pieno.
  3. La leggerezza è anche una percentuale; 0% è scuro (nero) e 100% è bianco.
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

L'esempio seguente definisce diversi colori HSL:

Esempio

#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 */
Prova tu stesso "

HSLA Colori

Valori di colore HSLA sono un'estensione dei valori di colore HSL con un alpha channel - che specifica l'opacità di un colore.

Un valore di colore HSLA viene specificato con: HSLA (tonalità, saturazione, luminosità, alpha ), dove l' alpha parametro definisce l'opacità. L' alpha parametro è un numero compreso tra 0.0 (completamente trasparente) e 1,0 (completamente opaco).

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

L'esempio seguente definisce diversi colori HSLA:

Esempio

#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 */
Prova tu stesso "

Opacità

La proprietà CSS3 opacità imposta l'opacità di un valore RGB specificato.

Il valore della proprietà di opacità deve essere un numero compreso tra 0.0 (completamente trasparente) e 1,0 (completamente opaco).

rgb (255, 0, 0); opacità: 0,2;
rgb (255, 0, 0); opacità: 0,4;
rgb (255, 0, 0); opacità: 0,6;
rgb (255, 0, 0); opacità: 0,8;

Si noti che il testo di cui sopra sarà anche opaco.

L'esempio seguente mostra i valori RGB differenti con opacità:

Esempio

#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 */
Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»


❮ Precedente Successivo Capitolo ❯