Per gestire il colore del testo o dello sfondo di un elemento HTML, le specifiche CSS3 prevedono due proprietà: color e opacity. Cerchiamo di capire come utilizzarle.
Le proprietà che prenderemo in esame oggi appartengono al modulo CSS Color level 3 delle specifiche CSS3. Le specifiche del modulo sono pubblicate al seguente link:
http://www.w3.org/TR/css3-color/
Il modulo ha come scopo quello di gestire i colori in foreground (ossia il colore del testo) degli elementi HTML e, più in generale, di specificare la sintassi da usare per assegnare un colore ad un elemento.
La proprietà color
Questa proprietà definisce il colore in foreground (cioè il colore in primo piano, non quello dello sfondo) dell’elemento HTML a cui è applicata. I valori di questa proprietà possono essere espressi in diversi modi che vedremo in seguito. Ad esempio il codice
<html>
<body>
<p style="color:blue">Nome</p>
</body>
</html>
produrrà come risultato un paragrafo il cui testo sarà di colore blu.
Ci sono diversi metodi per dare un colore di foreground ad un elemento. Qui li vediamo tutti insieme:
<html>
<body>
<p style="color:blue">Nome</p>
<p style="color:rgb(0,0,255)">Cognome</p>
<p style="color:#0000FF">Indirizzo</p>
<p style="color:hsl(240,100%,50%)">Telefono</p>
</body>
</html>
In tutti e 4 i casi otterremo un testo di colore blu.
Possiamo vedere il codice in azione qui:
https://www.alessandrostella.it/lato_client/css3/css3_00.html
La funzione rgb(0,0,255) calcola il colore come miscela dei 3 colori di base, cioè red, green e blue (rgb). Ogni colore può assumere un valore tra 0 (niente colore) e 255 (il massimo del colore). Pertanto rgb(0,0,255) significa 0 rosso, 0 verde e 255 blue, quindi blue.
Lo stesso discorso, ma in modo più compatto, vale per il valore #0000FF.
Anche in questo caso vengono usati 3 numeri per indicare i 3 colori fondamentali (rgb). In questo caso però invece della funzione rgb() viene usato il cancelletto (#), inoltre i valori per i singoli colori sono espressi in esadecimale invece che in decimale, ossia i valori che possono assumere i colori partono da 00 e arrivano a FF (255 in decimale). Pertanto #0000FF significa 0 rosso, 0 verde e 255 blue.
Infine la funzione hsl(240,100%,50%) calcola il colore in base a 3 parametri, cioè hue, saturation e lightness (hsl). Per comprenderne il modo di utilizzo è opportuno studiare le seguenti tabelle
http://www.w3.org/TR/css3-color/#hsl-examples
Questi sono tutti i modi che abbiamo a disposizione per decidere il colore in foreground di un elemento HTML.
In realtà, vedremo in seguito che le stesse funzioni appena viste sono usate anche per assegnare un colore di sfondo, ma ovviamente la proprietà non sarà più color, ma background-color.
La proprietà opacity
Questa proprietà ha come scopo quello di rendere trasparente o opaco un elemento, indipendentemente dal colore. I valori che può assumere questa proprietà vanno da 0 a 1. Zero significa completamente trasparente, mentre 1 significa completamente opaco. Esempio:
<html>
<body>
<p style="opacity:0.5">Nome</p>
</body>
</html>
Il risultato sarà quello di ottenere il testo “Nome” opaco al 50%.
Dobbiamo porre attenzione a questa proprietà, perché essa viene ereditata da tutti i figli dell’elemento a cui è applicata. Prendiamo infatti questo codice HTML:
<html>
<body>
<div id="test">
<p>alex</p>
</div>
</body>
</html>
e il rispettivo CSS:
#test {
background:red;
border-style:solid;
border-color:black;
width:250px;
height:250px;
opacity:0.5;
}
Con questo codice ci si potrebbe aspettare un quadrato con sfondo rosso e bordo nero (cioè il <div> #test), opaco al 50%. Poi, all’interno di questo quadrato, un paragrafo con testo nero. Ma non è così. La proprietà opacity infatti viene ereditata da tutti gli elementi figli dell’elemento a cui viene impostata. Quindi tutti gli elementi HTML figli del <div> #test avranno sia i colori in primo piano, sia quelli di sfondo, trasparenti al 50%. Quindi anche il testo “alex” risulterà trasparente al 50%.
Possiamo osservare quanto appena asserito qui:
https://www.alessandrostella.it/lato_client/css3/css3_01.html
Non sempre però questo è ciò che vogliamo! Anzi, in genere non è quello che vogliamo!
Per impostare trasparente al 50% solo il colore di sfondo del rettangolo, possiamo usufruire della funzione rgba(r,g,b,a) con cui, oltre a impostare uno specifico colore per un elemento (i primi 3 parametri), possiamo deciderne anche il livello di opacità (ultimo parametro, a). Basta quindi modificare il codice CSS, come segue:
#test {
background:rgba(255,0,0,0.5);
border-style:solid;
border-color:black;
width:250px;
height:250px;
}
In questo modo otterremo il quadrato rosso opaco al 50%, ma lasceremo inalterata l’opacità sia dei bordi del quadrato sia del testo del paragrafo.
Possiamo osservare il risultato qui:
https://www.alessandrostella.it/lato_client/css3/css3_02.html