Opacità: RGBA

Blog

Avere la possibilità di sovrapporre colori semitrasparenti può incrementare notevolmente le soluzioni grafiche che abbiamo a disposizione quando disegnamo un sito. Si tratta, infatti, di un nuovo e potente strumento che ci permette di esaltare la nostra creatività.

La trasparenza “alpha” è la proprietà dei colori che gli permette di assumere diversi livelli di opacità. Fino ad oggi, avevamo esclusivamente due metodi per definire lo specifico livello di trasparenza di un elemento: usare le immagini in formato PNG oppure utilizzare la proprietà dei CSS “opacity”.

PNG

Il formato PNG supporta un canale alpha e, pertanto, può essere utilizzato per creare immagini di sfondo semistrasparenti. Per esempio, potreste creare un’immagine verde di 1X1 px con una trasparenza di 0.5 e impostarla come background ripetuto di un paragrafo.

In questo esempio il nostro paragrafo ha un’immagine PNG verde di 1X1 px con trasparenza 0.5 impostata come background ripetuto. Il risultato è uno sfondo semitrasparente che funziona perfettamente in tutti i browser ma non in IE6.

Segue il codice CSS per l’esempio sopra:

p {background:url(rgba-bg.png) 0 0 repeat}

Questa tecnica funziona egregiamente in Firefox, Safari, Opera e Internet Explorer 7 e 8. In caso di necessità, esistono dei JavaScript che vi permettono di utilizzare i PNG trasparenti anche in IE6. Questo significa che, usando i PNG per ottenere effetti di semitrasparenza, potrete ottenere il supporto totale dei maggiori browser in circolazione.

Il punto debole di questo approccio è che, visto che abbiamo a che fare con immagini, se in futuro dovete modificare un colore o il livello di trasparenza, vi dovrete ricreare tutte le immagini. Questo potrebbe anche andar bene se avete solo un paio di immagini da modificare, ma cosa succede se il vostro design comprende un numero notevole di immagini semitrasparenti? Qualunque modifica diventerebbe alquanto impegnativa, non è vero?

La proprietà opacity

La proprietà “opacity” è una prorietà dei CSS3 che permette di impostare livelli di trasparenza su qualunque elemento e direttamente dal foglio di stile. Il livello di trasparenza varia da 0 (opaco) a 1 (trasparente). Per esempio, potreste impostare il livello di trasparenza di un paragrafo con uno sfondo verde a 0.5, in modo da ottenere una trasparenza del 50%.

In questo caso, invece di utilizzare un’immagine, stiamo semplicemente usando un normale background verde (#7cb01e) sul tag <p>, abbinato al livello di opacità che abbiamo definito impostando la proprietà “opacity” a 0.5. Come potete vedere, in questo caso, anche il testo diventa semitrasparente! Questa tecnica funziona correttamente in Firefox 1.5+, Safari, Opera 9+.

Quello che segue è il codice CSS per l’esempio sopra:

p {background:#7cb01e;opacity:.5}

La proprietà “opacity” sembra essere una soluzione più flessibile rispetto ai PNG perchè in questo caso il livello di opacità può essere modificato in maniera semplice cambiando un solo valore nel CSS, invece di dover ricreare tutte le immagini.

Il lato negativo di questo metodo è che l’opacità ha effetto sul background del paragrafo, ma anche su tutti gli altri elementi in esso contenuti. Questo significa che, non solo il background verde, ma anche il testo incluso all’interno del tag <p> ed ogni altro elemento contenuto nello stesso, sarà trasparente al 50%.

In qualche caso questo effetto può essere ciò che desiderate, altre volte magari no!

RGBA

Tutti sanno cosa si intende per RGB. Si tratta dell’acronimo di Red, Green e Blue ed è un modello di colori che permette di definire un colore sulla base di tre valori numerici separati da virgola.

In questo terzo esempio ho semplicemente impostato un normale background al nostro paragrafo, usando il valore RGB della gradazione di verde che abbiamo usato nel primo esempio ma senza opacità (#7cb01e).

Segue il codice CSS per l’esempio precedente:

p {background:rgb(124,176,30)}

RGBA, che sta per Red, Green, Blue, Alpha, non è altro che un’estensione del modello di colori RGB che ci offre però la possibilità di impostare un quarto valore: il livello di l’opacità del colore.

Come per la proprietà “opacity”, il valore alpha può variare tra 0 e 1. Ad un primo sguardo, potreste pensare che la proprietà “opacity” e RGBA funzionano alla stessa maniera, ma ad uno sguardo più attento vi accorgerete che c’è una enorme differenza. Mentre nel primo caso l’opacità interessa l’elemento su cui viene applicata ed anche tutti gli altri elementi figli, nel caso di RGBA l’elemento che ha l’opacità è l’unico ad essere interessato. Questo significa che se impostiamo un valore alpha di 0.5 al background del nostro paragrafo, il testo in esso contenuto rimarrà 100% opaco!

Questo esempio mostra RGBA in azione! Abbiamo semplicemente aggiunto il valore alpha all’RGB che abbiamo usato nell’esempio precedente. RGBA funziona in Firefox 3+, Safari, Opera 10+.

Ecco il CSS per l’esempio precedente:

p {background:rgba(124,176,30,.5)}

Come nel caso della proprietà “opacity”, visto che non stiamo usando alcuna immagine per creare l’effetto di trasparenza, potremo modificare velocemente il colore o il livello di opacità editando il CSS.

Per tutte queste ragioni RGBA potrebbe davvero essere considerato come possibile soluzione al problema della semitrasparenza. Più potente, flessibile e facile da manutenere di PNG e “opacity”.

RGBA è correttamente interpretato da Firefox 3+, Safari, Opera 10+, pertanto il supporto non è molto differente da quello della proprietà “opacity” (Firefox 1.5+, Safari 1.2+, Opera 9+). Questo significa che entrambe le tecniche RGBA e “opacity” sono supportate solo dai browser più moderni.

Internet Explorer, ovviamente, non offre alcun supporto per queste tecniche. Tuttavia, se pensiamo al loro impiego nell’ottica di quello che è stato chiamato “progressive enrichment“, potremmo sicuramente iniziare ad utilizzarle nei nostri progetti offrendo al tempo stesso un solido backup per i browser più vecchi come Internet Explorer.

p { background:#bdd78e /* for IE  */
    background:rgba(124,176,30,.5)
}

Internet Explorer leggerà il primo background, ignorando completamente il secondo con il valore alpha.

Giocare con RGBA

Come ho già detto, RGBA non può essere solo usato sono con i background, ma può essere anche impiegato per impostare il livello di opacità dei normali colori. Potreste, per esempio, fondere visivamente del sempice testo con il proprio background impostando il valore alpha sul colore del testo stesso.

p {color:rgba(0,0,0,.65)}

In questo modo otterrete un effetto molto piacevole, in cui il testo si mescola gradevolmente con il colore di sfondo, creando un’armoniosa e raffinata palette per il vostro sito.

Qui potete vedere come si può usare RGBA per integrare del testo con il proprio sfondo. Il colore del testo è diventato una gradazione di verde.

Con RGBA potete anche create un semplice effetto hover per i vostri link, variando il colore che avete scelto in una sua gradazione.

Questo esempio mostra RGBA in azione sui link! Ho semplicemente impostato il valore alpha sullo stato “hover” del link, riducendo l’opacità del 25%.

Questo può essere facilmente ottenuto diminuendo l’opacità del colore dei link come mostrato nel codice che segue:

a {color:rgb(190,7,0)}
a:hover {color:rgba(190,7,0,.75)}

Conclusione

L’opacità apre un nuovo mondo di possibilità per i web designer e può aiutarvi a rendere i vostri siti più attraenti e facili da manutenere. Se avete già abbracciato il concetto di “progressive enrichment” e se siete già riusciti a convicere i vostri clienti che i siti non devono essere identici in ogni browser, allora non c’è motivo di attendere oltre!

Iniziate a giocare con RGBA ora, fornendo sempre dei solidi salvagenti per i browser meno moderni. Regalate invece ai browser innovativi ciò che meritano, migliorando al tempo stesso l’esperienza dell’utente!

Postato martedì 19 gennaio 2010 alle 13:54

2 commenti all'articolo

  1. tobias scrive:

    Salve,
    io stò cercando una soluzione per rendere il background di un’elemento con un gradient css3 e un’opacità in trasparenza, in questa guida spiegate egregiamente come si si utilizza la trasparenza nei vari browser su colori a tinta unita, avete qualche idea di una possibile soluzione per applicarlo sui gradient?

  2. Cristiano scrive:

    Grazie per il post. Mi è statp di grande aiuto!
    Se non lo hai gia scritto mi potresti dire come si crea l’ effetto ombra da applicare ad una tabella?
    Ciao da cristiano :D

Lascia un commento

Votate l'articolo in modo da aiutarci a decidere i temi su cui verteranno i futuri post. I commenti sono moderati. Vi chiediamo cortesemente di non postare link pubblicitari e di non fare alcun tipo di spam.