CSS ed opacità: metodi per creare elementi trasparenti

Ci sono due metodi, in generale, per creare elementi in parte trasparenti, da inserire in una pagina Web. Il primo metodo utilizza le PNG trasparenti con l'opacità pre-impostata attraverso un programma grafico. Tale tecnica funziona ma rende un pò complicata la renderizzazione compatibile cross-browser. Internet Explorer 6, e versioni inferiori, non supporta nativamente la trasparenza alfa PNG, per cui si deve ricorrere al filter AlphaImageLoader della Microsoft più qualche altro script per correggere questa mancanza.

Il secondo metodo per la creazione di elementi trasparenti - la tecnica provata nel presente articolo - è quello di utilizzare le proprietà dei CSS per controllare direttamente la trasparenza di un elemento.

Mentre questo metodo ha di suo delle controindicazioni, presenta alcuni vantaggi rispetto alla tecnica delle PNG: è molto più semplice - non solo si può manipolare direttamente la trasparenza di un elemento, oltre al fatto che non si ha bisogno di caricare immagini esterne, ma non è nemmeno necessaria la parte di codice proprietario della Micrsoft - filter AlphaImageLoader - , sebbene è necessario l'uso di un altro filtro, non meno contorto.

Nel corso del presente articolo saranno presentati alcuni esempi al fine di dimostrare come utilizzare le tecniche di opacità nelle pagine web. Per un aiuto più concreto è possibile scaricare tutti i file di esempio.

La proprietà "Opacity" dei CSS

I CSS 3 hanno una specifica proprietà che controlla la trasparenza di un elemento, chiamata, appunto, opacity. Prende il suo valore da un numero - da zero ad uno - che rappresenta il grado di opacità. Il valore zero significa completamente trasparente; il valore uno indica il colore pieno.

Per dimostrare questa proprietà, si faccia un semplice esempio; si creino due div con i CSS. Dopo aver creato i due box, aver impostato le dimensioni, il colore,la posizione nel viewport del browser attraverso i css, avremo una pagina come quella riportata nell'immagine seguente:

immagine di 2 box sovrapposti
Figura 1: elementi sovrapposti

Adesso si renderà il div B parzialmente trasparente impostando la proprietà di opacity:

#boxB { opacity: .3; }

Il codice CSS indica una opacità del 30%, come dimostrato dalla seconda immagine:

Div B reso opaco al 30%
Figura 2: Un elemento trasparente permette di vedere la zona sottostante

Si è ottenuto, forse, un grado di trasparenza più elevato rispetto a quello desiderato. Si può intervenire sul livello di opacità:

#boxB { opacity: .7; }

Adesso il box è più opaco (al 70%), come mostrato nell'immagine seguente:

Div B reso opaco al 70%
Figura 3: Aumento del valore dell'opacità

Perché si usano numeri decimali invece delle percentuali, come avviene per altre proprietà? Come menzionato in uno scritto di Tantek Çelik, al momento persona di spicco della Microsoft ai gruppi di lavoro del W3C sull'HTML ed i CSS, si è pensato che le percentuali potrebbero creare confusione tra il genitore dell'elemento in oggetto ed i suoi discendenti. Per cui si è optato per una nuova unità di valore per eliminare problemi e rendere più chiara la cosa.

Se da un lato questa proprietà ha un grande potenziale, dall'altro è ancora in fase sperimentale in quanto non ufficialmente raccomandata dal W3C. Tuttavia, la maggior parte dei browser moderni interpreta la proprietà opacity, tra cui Firefox 1.5 +, Safari 1.2 +, Opera 9 e successivi. Internet Explorer 7 non supporta tale proprietà e pare che il prossimo IE8 la supporterà; gli esempi sono stati testati anche sulla versione beta, versione disponibile al momento della scrittura del presente articolo.

Quindi, come è possibile rendere un elemento semi trasparente cross-browser? Fortunatamente Internet Explorer ed i browser basati su Mozilla, quali Firefox e Netscape Navigator, contengono di default la proprietà di opacità per poter ottenere quanto illustrato nell'articolo. Browser basati su Mozilla versione uno non sono più utilizzati inquanto adesso, quelli in uso, supportano correttamente la proprietà opacity; per Internet Explorer 5.5 e superiori si ha bisogno di introdurre la proprietà filter, in grado di creare vari effetti quali ombre e gradienti. Per impostare la trasparenza di un elemento viene usato il filter alpha al quale viene impostato un valore tra zero e 100:

#boxB { filter: alpha(opacity=30); }

Una soluzione cross-browser

Viene presentato un esempio che funziona nella maggior parte dei browser moderni.

Primo passaggio: si creerà una pagina web, simile a quella riportata in figura 4, nella quale si inseriranno 2 div: un div id="content" al quale è stato assegnato un background raffigurante una barca ed un livello che contiene una citazione dal Tao Te Ching:

<div id="content"> 
   <div id="quotebox"> 
      <div id="quote"> 
         <p>Be content with what you have; rejoice in the way things are.</p> 
         <p>When you realize there is nothing lacking, the whole world belongs to you.</p>
         <p><em>— Lao Tzu</em></p> 
      </div><!-- end #quote --> 
   </div><!-- end #quotebox --> 
</div><!-- end #content -->  
immagine dei 2 div non trasparenti
Resa di default

Supponiamo che si voglia rendere il div bianco sovrapposto, parzialmente trasparente, in modo tale da far vedere l'immagine della barca dietro di esso. Per fare questa operazione, si deve aggiungere la proprietà CSS al box. In questo esempio, il div "quotebox" racchiude il livello:

#quotebox { opacity: .4; filter: alpha(opacity=40); }

Usiamo le 2 proprietà per garantire che l'effetto di trasparenza operi nel maggior numero possibile di browser. Si noti la sovrapposizione del livello trasparente, come quella della figura 5:

Livello sovraposto trasparente
Figura 5: citazione trasparente

Mentre non ci sono problemi per i due div sovrapposti, si noterà che, contemporaneamente, anche il testo è trasparente. Questo perché la proprietà opacity è ereditata dagli elementi figli. In questo esempio il div id="quote" racchiude la citazione. Possiamo cercare di ignorare la trasparenza ereditata, reimpostando l'opacità del div id="quote":

#quote{font-size: 32px; color: #000; opacity: 1; filter: alpha(opacity=100); }

Purtroppo questa tecnica non funziona in molti browser, e produrrà un testo illeggibile.

Quindi, la soluzione a questa non perfetta soluzione è quella di rendere opaco il livello in maniera tale che il testo in esso contenuto sia leggibile, come mostrato in figura 6:

#quotebox { opacity: .65; filter: alpha(opacity=65); } 
Div quote con contrasto leggibile
Figura 6: La citazione con maggior contrasto per una migliore leggibilità

Come si può notare, il livello sovrapposto è abbastanza trasparente al tal punto da permettere di leggere il testo. Anche se questa cosa potrebbe non essere molto versatile, potrebbe essere una soluzione gestibile fino a quando i browser supportano questa nuova proprietà css.

Inconvenienti

Se da un lato possiamo disporre di un modo abbastanza elegante per garantire la compatibilità nei maggiori browser, ci sono un paio di inconvenienti in questa tecnica.

In merito al problema dell'ereditarietà menzionato più su, il codice CSS creato non è conforme agli standard. Le proprietà CSS3 non sono ancora a livello di raccomandazione; il validatore CSS opzionalmente potrebbe validare il codice CSS3, mentre le altre due dichiarazioni sono proprietarie e quindi non riconosciute dal W3C.

Se si ritiene importante scrivere codice valido in un sito web, cosa non sbagliata che merita, anzi, di essere raccomandata, tale tecnica non la si dovrebbe inserire. Però... se si è alla ricerca di una soluzione che funzioni nella maggior parte dei browser fino a quando diventi raccomandazione del W3C, questo metodo potrebbe rendere gli elementi trasparenti e potrebbe essere adottato in un sito web.

Il futuro delle trasparenze

Mentre la proprietà opacity fa parte della sezione "Color Module" dei CSS3, questa specifica include altri metodi per controllare la trasparenza attraverso i CSS. E' possibile specificare un canale alfa e conoscere il modello di colore RGB (Red - Green - Blue) ed HSL (Hue - Saturation - Lightness). Questi modelli di colori con il canale alfa aggiunto vengono definiti rispettivamente RGBA ed HSLA. Il canale alfa è indicato come l'ultimo valore dell'RGBA e dell'HSLA, e funziona alla stessa maniera come opacità, con valori tra zero (completamente trasparente) ed uno (colore pieno). Per esempio, il valore RGBA rgba(255, 0, 0, 0.5) è un colore rosso con una trasparenza dello 0.5. La differenza tra opacità e questi due nuovi modelli di colore è che l'opacità è applicata a tutto l'elemento in modo tale che testo, sfondo e bordi prendano le caratteristiche di opacità specificate. Nei modelli di colore RGBA e HSLA essa si applica solo alla proprietà specificata. Per esempio: si potrebbe mantenere il testo di colore pieno, su uno sfondo totalmente o parzialmente opaco. Sia HSLA che RGBA saranno implementati nella prossima versione del motore di rendering di Opera, Core-2.2, e possono essere previsti nell'ACID3, realizzati da Opera Lab. Il loro supporto è incluso anche in Safari e Firefox versione 3 e superiori.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati