Come realizzare un layer trasparente con CSS3

Una funzionalita molto sfruttata nell'ambito delle Rich Internet Application, e quindi nel Web 2.0, e la sovrapposizione di layer trasparenti sopra i contenuti principali. Questi layer possono servire per visualizzare un popup all'utente, creare un'impronta degli oggetti trascinabili e rilasciabili (come ad esempio una galleria fotografica) oppure per evidenziare alcune aree, creando un effetto simile a quello del classico evidenziatore da ufficio.

Preparazione dell’immagine

Preparazione dell’immagine

La proprietà BORDER-IMAGE permette di usare un’immagine, ad esempio in formato JPEG o PNG, come bordo per un elemento HTML. Di primo acchito la proprietà sembra poco interessante, perché l’applicazione di un’immagine al posto del bordo non sembra poi così utile. Si potrebbe pensare che tanto varrebbe usare la vecchia proprietà BACKGROUND-IMAGE. Questo sarebbe vero se la proprietà BORDER-IMAGE si limitasse ad applicare l’immagine in modo uniforme. In realtà l’immagine di partenza viene sezionata in nove pezzi, e questi nove pezzi vengono poi applicati ai rispettivi bordi. In pratica è come se tagliassimo un’immagine con un taglierino e poi usassimo i vari pezzi come colore di sfondo di ciascun elemento del bordo: il pezzo in alto a sinistra andrà a coprire il bordo in alto a sinistra, mentre il pezzo centrale in alto andrà allungato per coprire interamente tutto il bordo superiore.

overlay_02

Figura 2 – Propagazione dell’immagine del bordo

Sfruttando questo comportamento possiamo creare effetti molto interessanti. Nel nostro caso agiremo così: scegliamo un’immagine di sfondo uniforme, del colore che più ci piace. Per comodità possiamo lavorare su un’immagine di media grandezza, diciamo almeno 100×100 pixels: più grande è l’immagine iniziale, maggiore sarà la precisione del risultato finale. Tagliamo un quadrato centrale dall’immagine, usando il righello per essere sicuri che il quadrato abbia dimensioni pari ad un terzo dell’immagine e sia perfettamente al centro. Il risultato dovrebbe essere qualcosa del genere

overlay_03

Figura 3 – Immagine ritagliata

Notiamo che abbiamo anche arrotondati i bordi: ciò permette di prendere due piccioni con una fava, perché mentre creiamo la struttura per il layer trasparente stiamo anche arrotondando i bordi del contenitore. È proprio questo il vantaggio di cui parlavamo in apertura dell’articolo: tutto il lavoro di configurazione può essere svolto a livello grafico, senza coinvolgere JavaScript o CSS.

Il quadrato centrale dell’immagine di figura 3 può essere riempito a piacimento. Se lo lasciamo vuoto il layer sarà completamente trasparente (e quindi praticamente inutile). Inserendo un pattern trasparente sottile, cioè con un piccolo alpha-value, creiamo invece l’effetto di trasparenza. Sta a noi decidere quanto trasparente deve essere il layer, regolandoci sulla trasparenza del quadrato centrale. Dalla figura 2 si capisce che il quadrato centrale verrà allungato fino a coprire tutto il box. Per questo motivo il colore di sfondo e l’opacità del quadrato centrale sono le variabili più importante.

Per comodità consigliamo di creare più versioni della stessa immagine, prima di ridimensionarle. Le immagini vere e proprie che useremo nel foglio CSS saranno infatti una versione ridimensionata di quella vista qui sopra. Un buon ridimensionamento potrebbe essere 10×10 oppure 15×15, a seconda delle esigenze.