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%;
}

Continua a leggere→