Con questo tutorial vedremo tutte le novità dei CSS3 per quanto riguarda l’uso del colore. Con la nascita della "nuova" versione di CSS possiamo definire il colore in modo molto accurato e creare trasparenze senza dover ricorrere a trucchi e trucchi e trucchetti: le nostre pagine HTML saranno quindi più leggere e avremo una maggiore flessibilità.

Tutte le proprietà che analizzeremo sono supportate da Firefox, Safari e Chrome.

Specificare il colore

  • RGBA

Per definire un colore si è usato fin ora, accanto alle definizioni esadecimali (#333333) e dei nomi dei colori (red), la specifica rgb (0,0,0); dove tra le parentesi vanno definite le quantità percentuali o numeriche dei colori, rispettivamente: rosso, verde e blu. Ricordiamo che il valori numerici vanno da 0 a 255, dove quest’ultimo equivale al colore pieno.

p {color: rgb(255,0,0);}<br />    a  {color: rgb(0,255,0);}<br />    div  {color: rgb(50,50,50);}

Il paragrafo avrà il testo rosso, il link  avrà testo giallo ed il div  testo grigio.

CSS3 aggiunge un quarto valore: “Alfa”, ovvero la trasparenza. Vediamo come:

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

l’elemento al quale applicheremo questa regola avrà lo sfondo rosso con una trasparenza del 50%


Il valore che possiamo dare ad alfa va da 0 (completamente trasparente) a 1 (nessuna trasparenza), i valori intermedi vengono interpretati come percentuali di trasparenza, ad esempio 0.5 equivale ad una trasparenza del 50%. Alfa non supporta i valori in percentuale, per cui, se vogliamo dare percentuali ai colori dovremmo scrivere così:

p { color: rgba(100%, 50%, 0%, 0.1) }

Il testo del paragrafo apparirà arancione e quasi completamente trasparente.
 

  • HSL

Altra novità per CSS3 è la possibilità di specificare il colore attraverso il modello HSL, che definisce i colori in base a tonalità (Hue), luminosità (Lightness) e saturazione (Saturation).
Chi ha studiato la teoria del colore o chi usa abitualmente software per la grafica avrà già dimestichezza con questo metodo, ad ogni modo la codifica HSL è soltanto uno dei tanti modi per rappresentare un colore, come RGB o CMYK, ecc.

Il primo valore Hue – tonalità -, può avere un numero compreso tra 0 e 360, nel metodo HSL la tonalità è rappresentata come angolo del cerchio del colore (cioè l’arcobaleno rappresentato in un cerchio, ulteriori info qui) ma nella regola CSS il simbolo del grado viene omesso. Luminosità e saturazione vengono invece espressi in percentuale.

p { color: hsl(0,100%, 50%);}

Div rosso con 100% di lunimosità e 50% di saturazione
 

  • HSLA

Definisce il colore secondo il metodo HLS, più la trasparenza alfa:

div{ background-color: hsla(0,100%,50%,0.6); }


Div rosso con 100% di lunimosità, 50% di saturazione e 60% di trasparenza.

La proprietà opacity

Una delle proprietà più attese dei CSS3 e dal codice più intuitivo è proprio opacity(); che regola l’opacità del colore degli elementi, la sintassi è facilissima:

div { opacity: 0.5;}

L’opacità del div sarà del 50%

I valori vanno da 0 (completamente trasparente) a 1 (nessuna trasparenza), praticamente si ottiene lo stesso affetto con il valore alfa della proprietà rgba(); o hsla(); ma con una differenza importante: opacity(); è ereditaria, ovvero si trasmette agli elementi figli mentre alfa ha effetto solo sull’elemento a cui è applicata la proprietà rgba (o hlsa).

Vediamo qualche esempio:


Bene, per il tutorial di oggi questo è quanto: arrivederci alla prossima "puntata" del nostro viaggio alla scoperta delle più interessanti e innovative funzionalità di CSS3.