Una delle tante novità introdotte con i CSS3 è quella relativa alla funzione rgba per definire il colore di sfondo di un elemento; oltre ai 3 canali Red, Green e Blue in pratica viene gestito un quarto canale e cioè alfa.

Il valore di alfa va da 0.0 (completamente trasparente) a 1.0 (completamente opaco) e consente quindi introdurre la trasparenza negli sfondi stessi.

La notazione sarà del tipo:

#elemento {
background-color: rgba(255,128,150,0.8);
…
}

utilizzando quindi i 256 possibili valori di ciascun canale e specificando infine la trasparenza.

Potete vedere un esempio molto semplificato in questa pagina dove le proprietà CSS sono state così definite:

body {
margin: 0;
padding: 20px;
background-color: #FFF;
}
#contenitore {
width: 600px;
height: 450px;
background-color: rgb(0,0,0); /* dichiarazione di sicurezza */
background-color: rgba(0,0,0,0.6); /* dichiarazione per i browser che supportano CSS3 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
padding: 7px 14px;
line-height: 120%;
}

Nell’esempio di cui sopra il box con il testo appare grigio ma in realtà il suo colore è nero con l’80% di opacità.
E’ evidente che l’uso della parziale trasparenza risulterà più utile con l’applicazione di immagini di sfondo sottostanti, piuttosto che una semplice combinazione di colori.

Bisogna stare attenti al fatto che la notazione rgba non è supportata da tutti i browser in circolazione, per esempio Internet Explorer 8 che è l’ultima versione installabile sui PC che girano con Windows XP, per cui è ragionevole pensare che continuerà ad essere utilizzato ancora per un certo tempo.

Di fatto, questi browser ignorano del tutto la dichiarazione quindi applicheranno il colore di sfondo di default che è bianco.
Possono quindi verificarsi problemi di leggibilità come nell’esempio di cui sopra: testo bianco e sfondo di pagina bianco!

E’ perciò indispensabile inserire nel foglio di stile una dichiarazione di sicurezza che faccia uso della funzione rgb, rinunciando alla trasparenza; dato che questa viene interpretata correttamente da tutti i browser, sarà necessario scriverla prima di quella desiderata che fa uso della funzione rgba.

In questo modo, i browser più vecchi applicheranno la prima dichiarazione e ignoreranno la seconda mentre i browser più recenti interpreteranno entrambe, applicando la seconda proprio in funzione dell’ordine in cui sono presenti nel foglio di stile.

Questi argomenti sono affrontati nel Corso Base di Web Design organizzato da INSTANT WEBSITES a Vigevano (PV).
Per approfondire l’argomento, visitare la pagina: http://www.instantwebsites.it/corsi.html oppure http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php