Paolo De Feo
a- a+

CSS3 colori: RGBA, HSL, Opacity per definire tonalità, luminosità, trasparenza. Esempi

Vediamo come definire i colori in CSS tramite la modifica diretta del codice.

Definire i colori in CSS è un’operazione che viene svolta abitualmente per definire lo stile di elementi e pagine web. Di solito l’associazione colori avviene attraverso l’implementazione di specifiche esadecimali (#000000 per il nero) o testuali (“black” in questo caso).

Tuttavia, è possibile intervenire anche attraverso altri metodi o tecniche per definire le tonalità cromatiche dei nostri documenti web, potendo intervenire sui colori anche in maniera complessa senza dover ricorrere a trucchi o hack particolari. Vediamo qualche esempio.

RGB e RGBA

La dichiarazione delle specifiche RGB e RGBA nella definizione di fogli di stile avviene in modo semplice e immediato, senza difficoltà particolari. RGB indica i colori rosso, verde e blu. RGBA indica invece i colori rosso, verde, blu con l’aggiunta del canale “alfa”, ovvero quello della trasparenza. La miscela cromatica avviene tenendo conto di valori numerici che vanno da 0 a 255: 0 indica trasparenza massima, 255 il colore pieno.

Esempio RGB

p
{
background-color:rgb(255,0,0);
}

In questo esempio abbiano dato lo sfondo rosso al nostro paragrafo. Bisogna ricordare infatti che i colori debbono essere sempre implementati e mixati tenendo conto dell’ordine “rosso-verde-blu”. La proprietà CSS RGB è supportata in tutti i maggiori browser senza problemi.

Esempio RGBA

Come abbiamo detto in precedenza, RGBA supporta miscele cromatiche più complesse grazie all’estensione della specifica RGB con il canale alpha. I valori RGBA sono supportati a partire da Internet Explorer 9, Chrome , Safari, Opera 10 e superiori, Firefox 3 e superiori. Il parametro “alpha” viene espresso a partire da 0.0 (trasparenza piena) a 1.0 (opacità).

p
{
background-color:rgba(255,0,0,0.5);
}

In questo caso abbiamo associato al nostro sfondo una percentuale di rosso al 50%: a video apparirà quindi come rosa.

HSL e HSLA

Le proprietà CSS3 HSL/HSLA definiscono il colore in base alla tonalità (Hue), alla saturazione (Saturation) e alla luminosità (Lightness). HSLA è l’unione di queste 3 proprietà con l’aggiunta del canale alfa, che ricordiamo essere quello della trasparenza. Queste 2 specifiche sono supportate in Internet Explorer 9, Chrome , Safari, Opera 10 e superiori, Firefox 3 e superiori.

Esempio HSL

La proprietà HSL (e quella HSLA) definisce il colore in base variabili fisse e percentuali: la tonalità o Hue è espressa in valore fisso, la saturazione o Saturation e la luminosità o Lightness tramite percentuali.

Hue è basato su una scala cromatica da 0 a 360, dove 0 (o 360) è il rosso, 120 il verde, 240 il blu. Saturation da 0 a 100%, dove 0% indica tonalità di grigio e 100% colore pieno. Infine, Lightness. Lightness esprime con 0% il nero e con 100% il bianco.

p
{
background-color:hsl(120,65%,75%);
}

La proprietà sopra descritta stampa a video un paragrafo dallo sfondo verde chiaro.

Esempio HSLA

HSLA mette in campo le stesse caratteristiche di HSL, ma con la possibilità di definire l’opacità di un oggetto. I parametri alpha di HSLA vanno da 0.0 (trasparenza) a 1.0 (opacità).

p
{
background-color:hsla(120,65%,75%,0.3);
}

L’esempio sopra indicato attua un colore verde chiaro allo sfondo del paragrafo con il 70% di trasparenza.

Opacity

Come indica la parola stessa, Opacity indica l’opacità degli elementi web a cui è applicata. Nota bene: questa proprietà viene applicata anche agli elementi nidificati. Quindi, se avremo un DIV con questa caratteristica applicata ad esempio come sfondo, anche i paragrafi ne verranno influenzati. I valori vanno da 0.0 (trasparenza) a 1.0 (opacità).

div
{
opacity:0.5;
}

In questo esempio è stato creato un DIV con opacità al 50%. La proprietà è supportata da tutti i maggiori browser. Internet Explorer la rende rizza a partire dalla versione 9. Per le versioni 8 e inferiori è possibile usare un filtro proprietario come questo: filter:Alpha(opacity=50).



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!