Il modulo CSS3 dedicato al colore è giunto, insieme a quello sui selettori, allo stato di Proposed Recomendation.
Al suo interno, oltre alla proprietà color, attraverso cui si imposta il colore di primo piano, ovvero il colore di elementi come il testo o i bordi, trova spazio la proprietà opacity.
Con opacity è possibile definire il livello di trasparenza di qualunque elemento. Di fatto, come recita la specifica, con opacity regoliamo il modo in cui un oggetto presente sulla pagina si fonde nella resa a schermo con lo sfondo.
La sintassi è delle più semplici. Ogni elemento ha di default un valore di opacity pari a 1. Se vogliamo regolare la sua trasparenza, usiamo una scala che va da 0.0 (oggetto completamente trasparente) a 1 (oggetto completamente opaco).
1
div {background:white; color:black; opacity: 0.5}
Abbiamo creato un box con sfondo bianco e testo nero; lo sfondo della pagina è un pattern ripetuto. Questo il codice CSS:
Il box #box1 non presenta nessuna dichiarazione relativa ad opacity, assume quindi il valore di default, 1, e risulta infatti completamente opaco (la texture dello sfondo non si intravede)
Ora impostiamo un valore di opacity pari a 0.5:
Le cose essenziali da notare sono due:
il box è ora semi-trasparente (si intravede la texture dello sfondo);
la trasparenza applicata con opacity viene ereditata da tutti gli elementi discendenti del div #box1; è quindi semi-trasparente anche il testo, e sarebbe stata semi-trasparente anche un'immagine inserita all'interno del div.
Chi utilizza Internet Explorer 9 ha potuto verificare, osservando la demo, che l'ultima versione del browser di Microsoft applica correttamente la trasparenza impostata con opacity. Il discorso è diverso per le versioni precedenti. Su Internet Explorer 8, per definire la trasparenza si ricorre ad un filtro proprietario di Microsoft preceduto dal prefisso -ms- (i valori vanno da 1 a 100):
1
-ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=50)";
Su IE6 e IE7, la sintassi è invece questa:
1
filter: alpha(opacity=50);
La conclusione? Se vogliamo estendere la compatibilità alle versioni 6, 7 e 8 di Internet Explorer, dobbiamo modificare così la nostra regola iniziale:
Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue).
I valori possono essere espressi in percentuale:
1
body {background-color: rgb(100%, 100%, 100%)}
oppure usando una scala che va da 0 a 255:
1
body {background-color: rgb(255, 255, 255)}
Le due regole sono equivalenti, in entrambi i casi lo sfondo della pagina sarà bianco.
L'uso della sintassi RGB si affianca, per la definizione dei colori, ai metodi basati sul codice esadecimale e sulle parole chiave.
Partendo da questa base, i CSS3 introducono una novità di sicuro interesse. Si tratta della definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa. 'Alfa' fa riferimento ad un'informazione extra, quella relativa al cosiddetto 'canale alfa', tramite il quale possiamo impostare la trasparenza del colore definito in RGB.
Sintatticamente, i valori RGB si esprimono allo stesso modo visto in precedenza; il valore a (alfa) si imposta usando una scala compresa tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), in maniera simile a quanto visto per la proprietà opacity:
1
body {background-color: rgba(255, 255, 255, 0.5)}
Un'altra novità dei CSS3 riguarda la possibilità di definire i colori attraverso una notazione HSL: Tonalità (Hue), Saturazione (Saturation), Luminosità (Lightness).
Sono concetti certamente noti a chi lavora nell'ambito della grafica. Il W3C giustifica l'introduzione di questo metodo, complementare rispetto a RGBa, in quanto ritenuto più intuitivo.
Per capire meglio come funziona HSL è opportuno spendere qualche parola sui valori della tripletta HSL.
Con 'H' (Hue), lo accennavamo, si definisce la tonalità. Il valore numerico è rappresentato dall'angolo (espresso in gradi) di un cerchio di colori che al grado 0/360 presenta il rosso, e che nelle altre posizioni, a intervalli di 30°, presenta le altre tonalità. Nella specifica si può trovare questa tabella riassuntiva utile per farsi un'idea più precisa:
Dal momento che i gradi sono la misura standard per gli angoli, non è necessario esprimerli come unità di misura, basta il valore numerico. In pratica, nel nostro CSS, per definire una tonalità rossa useremo 0, per il giallo 60, per il verde 120, e così via.
Definita la tonalità di base (H), si può intervenire per correggerla sui valori di saturazione (S) e luminosità (L). In entrambi i casi si usa una scala che va dallo 0% al 100%. Si tenga presente che impostando la luminosità al 100% si ottiene sempre il bianco, allo 0% sempre il nero, a prescindere dalla tonalità.
Dunque, se vogliamo rappresentare il rosso (il colore che corrisponde alla parola chiave red, per intenderci), scriveremo:
1
body {background-color: hsl(0, 100%, 50%) }
Accanto alla notazione HSL, e analogamente a quanto visto per RGB, la specifica CSS3 consente di definire la trasparenza del colore attraverso il canale alfa. Abbia così, insieme a RGBa, HSLa.
Per la trasparenza alfa valgono le stesse regole viste nella lezione precedente: la scala da usare va da 0.0 a 1.0 (che è il valore di default).
Riprendendo uno degli esempi visti per RGBa, possiamo ottenere lo stesso risultato in questo modo:
Fonte: css.html
Al suo interno, oltre alla proprietà color, attraverso cui si imposta il colore di primo piano, ovvero il colore di elementi come il testo o i bordi, trova spazio la proprietà opacity.
Con opacity è possibile definire il livello di trasparenza di qualunque elemento. Di fatto, come recita la specifica, con opacity regoliamo il modo in cui un oggetto presente sulla pagina si fonde nella resa a schermo con lo sfondo.
La sintassi è delle più semplici. Ogni elemento ha di default un valore di opacity pari a 1. Se vogliamo regolare la sua trasparenza, usiamo una scala che va da 0.0 (oggetto completamente trasparente) a 1 (oggetto completamente opaco).
1
div {background:white; color:black; opacity: 0.5}
Abbiamo creato un box con sfondo bianco e testo nero; lo sfondo della pagina è un pattern ripetuto. Questo il codice CSS:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il box #box1 non presenta nessuna dichiarazione relativa ad opacity, assume quindi il valore di default, 1, e risulta infatti completamente opaco (la texture dello sfondo non si intravede)
Ora impostiamo un valore di opacity pari a 0.5:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Le cose essenziali da notare sono due:
il box è ora semi-trasparente (si intravede la texture dello sfondo);
la trasparenza applicata con opacity viene ereditata da tutti gli elementi discendenti del div #box1; è quindi semi-trasparente anche il testo, e sarebbe stata semi-trasparente anche un'immagine inserita all'interno del div.
Opacity su Internet Explorer
Chi utilizza Internet Explorer 9 ha potuto verificare, osservando la demo, che l'ultima versione del browser di Microsoft applica correttamente la trasparenza impostata con opacity. Il discorso è diverso per le versioni precedenti. Su Internet Explorer 8, per definire la trasparenza si ricorre ad un filtro proprietario di Microsoft preceduto dal prefisso -ms- (i valori vanno da 1 a 100):
1
-ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=50)";Su IE6 e IE7, la sintassi è invece questa:
1
filter: alpha(opacity=50);
La conclusione? Se vogliamo estendere la compatibilità alle versioni 6, 7 e 8 di Internet Explorer, dobbiamo modificare così la nostra regola iniziale:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Tabella del supporto sui browser
Colore RGBa
Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue).
I valori possono essere espressi in percentuale:
1
body {background-color: rgb(100%, 100%, 100%)}
oppure usando una scala che va da 0 a 255:
1
body {background-color: rgb(255, 255, 255)}
Le due regole sono equivalenti, in entrambi i casi lo sfondo della pagina sarà bianco.
L'uso della sintassi RGB si affianca, per la definizione dei colori, ai metodi basati sul codice esadecimale e sulle parole chiave.
Partendo da questa base, i CSS3 introducono una novità di sicuro interesse. Si tratta della definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa. 'Alfa' fa riferimento ad un'informazione extra, quella relativa al cosiddetto 'canale alfa', tramite il quale possiamo impostare la trasparenza del colore definito in RGB.
Sintatticamente, i valori RGB si esprimono allo stesso modo visto in precedenza; il valore a (alfa) si imposta usando una scala compresa tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), in maniera simile a quanto visto per la proprietà opacity:
1
body {background-color: rgba(255, 255, 255, 0.5)}
Colore HSLa
Un'altra novità dei CSS3 riguarda la possibilità di definire i colori attraverso una notazione HSL: Tonalità (Hue), Saturazione (Saturation), Luminosità (Lightness).
Sono concetti certamente noti a chi lavora nell'ambito della grafica. Il W3C giustifica l'introduzione di questo metodo, complementare rispetto a RGBa, in quanto ritenuto più intuitivo.
Per capire meglio come funziona HSL è opportuno spendere qualche parola sui valori della tripletta HSL.
Con 'H' (Hue), lo accennavamo, si definisce la tonalità. Il valore numerico è rappresentato dall'angolo (espresso in gradi) di un cerchio di colori che al grado 0/360 presenta il rosso, e che nelle altre posizioni, a intervalli di 30°, presenta le altre tonalità. Nella specifica si può trovare questa tabella riassuntiva utile per farsi un'idea più precisa:
Dal momento che i gradi sono la misura standard per gli angoli, non è necessario esprimerli come unità di misura, basta il valore numerico. In pratica, nel nostro CSS, per definire una tonalità rossa useremo 0, per il giallo 60, per il verde 120, e così via.
Definita la tonalità di base (H), si può intervenire per correggerla sui valori di saturazione (S) e luminosità (L). In entrambi i casi si usa una scala che va dallo 0% al 100%. Si tenga presente che impostando la luminosità al 100% si ottiene sempre il bianco, allo 0% sempre il nero, a prescindere dalla tonalità.
Dunque, se vogliamo rappresentare il rosso (il colore che corrisponde alla parola chiave red, per intenderci), scriveremo:
1
body {background-color: hsl(0, 100%, 50%) }
Impostare la trasparenza
Accanto alla notazione HSL, e analogamente a quanto visto per RGB, la specifica CSS3 consente di definire la trasparenza del colore attraverso il canale alfa. Abbia così, insieme a RGBa, HSLa.
Per la trasparenza alfa valgono le stesse regole viste nella lezione precedente: la scala da usare va da 0.0 a 1.0 (che è il valore di default).
Riprendendo uno degli esempi visti per RGBa, possiamo ottenere lo stesso risultato in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Fonte: css.html