di Claudio Cicali, 5 dicembre 2004

La proprietà CSS3 opacity è supportata dai più recenti browser (Gecko based e IE6) in maniera standard per i primi e tramite un’estensione proprietaria per il secondo. Tramite tale proprietà si dovrebbe essere in grado di rendere un elemento o il suo sfondo più o meno opaco al variare del valore della proprietà, in modo che quanto sta sotto ad esso possa più o meno trasparire. Per Mozilla & C. si deve utilizzare dunque la proprietà opacity, impostandone un valore compreso tra 1 e 0, mentre per il browser di casa Microsoft occorre usare la proprietà filter usando come valore alpha(opacity=NN) dove NN deve essere un valore compreso tra 0 (trasparente) e 100 (opaco).

Vedremo come, sebbene sia un effetto interessante, esso oltre ad essere poco supportato soffra di un comportamento che lo rende praticamente inutilizzabile. Finiremo per trovare una soluzione di tipo diverso tipo utilizzando un altro elemento poco noto: l’opacità delle immagini in formato PNG descrivendo anche quali sonoi passi necessari per crearle tramite The Gimp.

Iniziamo i nostri esperimenti creando una form che si stagli su uno sfondo irregolare:

L’ovvio problema, in questo caso, è che gli elementi della form sono ben poco leggibili. Un effetto indesiderato a cui occorre porre subito rimedio. La prima cosa che può venire in mente è quella di impostare un colore di sfondo all’elemento form stesso. Magari un grigio, in modo da rimanere congruenti con il resto del sito:

Abbiamo risolto un problema, ma adesso ne abbiamo un altro di tipo diverso: l’effetto grafico è veramente deludente! Proviamo dunque ad impostare un po’ di trasparenza alla form, lasciandone il colore di sfondo a grigio e impostando opacity: .5;:

Ooops ! Ma cosa è successo ? Non solo il colore di sfondo della form è diventato trasparente (effetto desiderato), ma anche tutti i suoi figli e discendenti ! Le label, il pulsante e perfino i campi di input ! Ci siamo appena scontrati con il problema accennato nell’introduzione: impostare l’opacità di un elemento, fa sì che tutti i discendenti dell’elemento la ereditino. Quel che è peggio è che a nulla serve impostare un opacity: 1; a tutti i discendenti. Niente da fare, se vogliamo che la nostra form sia leggibile, occorre procedere in un’altra maniera.

A questo punto facciamo partire il nostro Gimp e creiamo una nuova immagine 10x10. Fate in modo che venga creta con un background trasparente. Usando lo strumento di riempitura (Fill, il secchiello di vernine) riempite l’immagine di un grigio più o meno scuro. Dalla finestra dei livelli, impostate l’opacità dell’immagine al 50% o al livello che preferite. A questo punto è sufficiente salvare l’immagine in formato png assicurandosi, non appena appare la finestra delle opzioni del formato prescelto, di spuntare la casella che indica di voler salvare le informazioni per l’Alpha transparency.

Riprendiamo in mano il nostro CSS e impostiamo l’immagine di sfondo della nostra form con l’immagine appena creata: background-image: url(bg_tr.png); (o come l’avete chiamata). Il risultato finale è finalmente sufficientemente interessante: