CSS3 Colore(Color)

CSS3 offre diversi metodi nuovi per definire i valori dei colori.

Definire i colori in CSS3

Nella sezione precedente, hai imparato come usareParola chiave color e notazione RGBDefinire i colori. Oltre al simbolo color e alla notazione RGB, CSS3 ha introdotto nuovi simboli come rgba(), hsl() e hsla() per impostare i valori di colore degli elementi.

Nel seguente capitolo, esamineremo uno per uno questi modelli di colore.

Valore del colore RGBA

Puoi definire i colori utilizzando il simbolo funzionale rgba() nel modello RGBA (rosso - verde - blu - alpha). Il modello di colore RGBA è un'estensione del modello di colore RGB con canale alpha, utilizzato per specificare l'opacità del colore.

Il parametro alpha accetta valori da 0.0 (completamente trasparente) a 1.0 (completamente opaco).

h1 {
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

Valore del colore HSL

I colori possono anche essere definiti utilizzando il simbolo di funzione hsl() nel modello HSL (tonalità saturazione luminosità). La tonalità è rappresentata come angolo di un cerchio o di un arco (cioè un arco del cerchio delarcobaleno) da 0 a 360. L'angolo è fornito in unità minori, perché l'angolo viene misurato solitamente in gradi, quindi l'unità è implicita nel CSS.

La saturazione e la luminosità sono rappresentate in percentuale. La saturazione del 100% rappresenta un colore pieno e il 0% è una sfumatura grigia. Tuttavia, la luminosità del 100% è bianca, il 0% è nera e il 50% è normale. Vedi l'esempio seguente:

h1 {
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

Valore del colore HSLA

È possibile definire i colori utilizzando il simbolo di funzione hsla() nel modello HSLA (tonalità saturazione-luminosità-alpha). Il modello di colore HSLA è un'estensione del modello di colore HSL con canale alpha, che specifica l'opacità del colore.

Il parametro alpha accetta valori da 0.0 (completamente trasparente) a 1.0 (completamente opaco).

h1 {
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}