RGBA permette di aggiungere un quarto valore ad i colori RGB, che definisce l’opacità del colore.
Ecco un esempio:
Colori RGBA
CSS3 Opacity
Opacity rappresenta una delle funzioni CSS3 maggiormente implementate.
Ecco un esempio:
Colori HSLA
HSLA permette di aggiungere un quarto valore ad i colori HSL, che definisce l’opacità del colore.
Ecco un esempio:
Ed il CSS utilizzato nel primo caso è:
background-color: hsla(0,100%,50%,0.2);
background-color: hsla(0,100%,50%,0.4);
background-color: hsla(0,100%,50%,0.6);
background-color: hsla(0,100%,50%,0.8);
background-color: hsla(0,100%,50%,1);
background-color: hsla(0,100%,50%,0.4);
background-color: hsla(0,100%,50%,0.6);
background-color: hsla(0,100%,50%,0.8);
background-color: hsla(0,100%,50%,1);
Mentre nel secondo caso lo stesso risultato è ottenuto con valori RGB:
background-color: rgb(243,191,189);
background-color: rgb(246,143,142);
background-color: rgb(249,95,94);
background-color: rgb(252,47,47);
background-color: rgb(255,0,0);
background-color: rgb(246,143,142);
background-color: rgb(249,95,94);
background-color: rgb(252,47,47);
background-color: rgb(255,0,0);
Color HSL
CSS3 permette di utilizzare, oltre a valori di colore RGB ed esadecimali, anche valori HSL (Hue, Saturation, Lightness).
I tre valori da specificare sono:
- Hue: rappresenta il grado della scala di colore: 0 (0 360) rapprsenta il rosso, 120 il verde, 240 il blu. Valori intermedi indicano le diverse tonalità di questi tre colori.
- Saturation: è un valore espresso in percentuale: 100%; è il colore pieno.
- Lightness: è anch’esso un valore percentuale: 0% rappresenta il valore più scuro (nero), 100% il più chiaro (bianco) e 50% il valore medio.
HSL fornisce, quindi, un ampio spettro di colori e sfumature disponibili.
Attualmente questa proprietà è supportata da Opera 9.5, Safari 3, Google Chrome e Firefox.
Ecco un esempio:
Ed il CSS utilizzato nel primo caso è:
background-color: hsl(0,100%, 50%);
background-color: hsl(120,100%, 50%);
background-color: hsl(240,100%, 50%);
background-color: hsl(120,100%, 50%);
background-color: hsl(240,100%, 50%);
Mentre nel secondo caso lo stesso risultato è ottenuto con valori RGB:
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);