disign.it | CSS3 e uso del colore | a digital sign for a best design!

Primo piano

CSS3 e uso del colore

Finalmente la release 9 di Internet Explore allineandosi -anche se non completamente- allo standard CSS3 permette un più 'sereno' utilizzo di tecniche migliorative come ad esempio la gestione del colore.
Vediamo alcune novità introdotte dai CSS3.

RGBA

Per definire un colore prima di CSS3 utilizzavamo le definizioni esadecimali (#ab43ed), o i nomi dei colori (green), o la specifica rgb(0,0,0).

CSS3 aggiunge un quarto valore “Alfa”, ovvero la trasparenza:
p {color: rgba(0, 0, 255, 0.5);}

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(0, 0, 100%, 0.5);}

HSLA

In alternativa con CSS3 possiamo definire il colore attraverso il modello HSL, ovvero tonalità (Hue), luminosità (Lightness) e saturazione (Saturation) più la trasparenza alfa.

Il primo valore Hue, 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).
Nell'espressione CSS il simbolo del grado non viene scritto.
Luminosità e saturazione vengono invece espressi in percentuale.

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

La proprietà opacity

opacity(); regola l’opacità del colore degli elementi
#wrapper { opacity: 0.5;}
Anche in questo caso i valori vanno da 0 (completamente trasparente) a 1 (nessuna trasparenza).

Attenzione: opacity è ereditaria, si trasmette agli elementi figli mentre alfa ha effetto solo sull’elemento a cui è applicata la proprietà rgba (o hlsa).