CSS  »  Articoli  »  CSS 3 

Questa è la traduzione dell'articolo Working With RGBA Colour di Drew McLellan pubblicato originariamente su 24 Ways il 1 Dicembre 2009.

Quando io e Tim discutevamo del redesign del sito di 24Ways l'anno scorso, una degli obiettivi chiave che ci siamo posti era quello di ottenere uno stile grafico accattivante senza appesantire la pagina con molte immagini. Quando abbiamo lanciato il sito molte persone sono rimaste sorprese dal fatto che il design non faceva uso di immagini PNG. Abbiamo invece usato i valori di colore RGBA, una funzionalità che è parte della specifica CSS3.

Cos'è il colore RGBA

Siamo tutti abituati a definire i colori nei CSS usando un mix di rosso, verde e blue, il mix richiesto per ottenre la tonalità che vogliamo. Tutto ciò è bello e funziona, ma qualunque valore alla fine specifichiamo uno è il dato comune: i colori sono solidi, piatti e anche un po' noiosi.

I CSS3 introducono un paio di nuovi modi per specificare i colori, uno di essi poggia sul sistema RGBA. La A sta per alpha, che si riferisce al livello di opacità del colore, oppure, per dirla in un altro modo, alla sua trasparenza. Ciò significa che siamo in grado di impostare non solo i valori per rosso, verde e blue, ma anche controllare quanto di ciò che sta dietro al colore viene mostrato. Proprio come con i livelli di Photoshop.

Ma non abbiamo già la proprietà opacity?

La possibilità di applicare l'opacità su un colore differisce leggermente dall'impostare l'opacità di un elemento attraverso la proprietà CSS opacity. Facciamo un esempio.

Abbiamo un elemento h1 con colori di primo piano e sfondo impostati rispetto ad una pagina che ha un background a pattern.

h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}

Impostando la proprietà opacity possiamo sistemare la trasparenza dell'intero elemento e del suo contenuto:

h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;
}

Il colore RGBA ci consente qualcosa di diverso: la possibilità di controllare l'opacità dei singoli colori piuttosto che dell'intero elemento. Così possiamo definire l'opacità solo sullo sfondo:

h1 {
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.5);
}

Oppure possiamo lo sfondo con un colore solido e cambiare l'opacità solo sul testo:

h1 {
color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}

Altri articoli

Altre guide

Altre newsletter