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.

Una funzionalità molto sfruttata nell’ambito delle Rich Internet Application, e quindi nel Web 2.0, è 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. Spesso questi effetti sono realizzati con jQuery oppure con JavaScript. Un esempio di realizzazione di un layer trasparente con JavaScript è disponibile qui.

Grazie a CSS3 possiamo ottenere lo stesso effetto lavorando unicamente con i fogli stile. I vantaggi sono notevoli, perché i fogli di stile sono spesso competenza di grafici e illustratori, che non sempre si trovano a proprio agio con JavaScript. La possibilità di definire l’aspetto dei layer trasparenti lavorando unicamente con CSS permette una migliore divisione dei compiti all’interno del team di sviluppo. L’altro vantaggio riguarda la qualità del risultato finale. Come vedremo tra poco, la tecnica suggerita da CSS3 permette di definire sia la trasparenza del layer, sia il bordo che lo circonda. Lavorando su un’unica immagine potremmo definire tutti gli aspetti che ci interessano: tipo di trasparenza, immagine di sfondo, tipo di bordo e colore del bordo. La tecnica sfrutta una nuova proprietà introdotta con CSS3: la proprietà BORDER-IMAGE. Capire l’utilizzo della nuova proprietà richiede pochi minuti, ma le applicazioni possibili sono davvero interessanti. L’unico svantaggio, al momento, è lo scarso supporto che la proprietà trova nei browser. Ovviamente dovrebbe trattarsi di una difficoltà temporanea: nei prossimi mesi ci aspettiamo che il supporto cross browser di CSS3 migliori, permettendoci di sfruttare appieno le potenzialità della proprietà BORDER-IMAGE. Nel frattempo, se vogliamo essere lungimiranti e capire quali sono le potenzialità, possiamo fare qualche prova usando Chrome, perché è uno browser che implementa meglio le nuove funzioni CSS3.

Quello che vogliamo ottenere è qualcosa del genere:

Figura 1 – Layer trasparente con CSS3overlay_01

Se guardiamo attentamente alla figura, noteremo una leggera sfumatura all’interno del rettangolo sovrapposto al testo. Nel caso qui sopra la sfumatura non è volutamente uniforme, ma se necessario possiamo modificare l’effetto grafico a nostro piacimento, scegliendo tra diverse sfumature: tutto il lavoro di configurazione e definizione del tipo di sfumatura riguarda unicamente il ritocco dell’immagine originale usata per creare l’effetto. In altre parole possiamo gestire il tipo di trasparenza semplicemente cambiando l’immagine di partenza.

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.

Codice CSS

Codice CSS

Supponiamo adesso di aver ridimensionato l’immagine di figura 3 nel formato 15×15 pixels. Ciò significa che quando useremo la proprietà BORDER-IMAGE il browser taglierà quest’immagine in nove pezzetti, ciascuno di dimensioni 5×5 pixels (un terzo dell’immagine originaria). Questo calcolo è molto importante, perché serve a definire le dimensioni esatte del bordo che vogliamo applicare sul layer. Il codice CSS è il seguente:

che applichiamo al seguente markup:

Dove l’elemento container è un generico div, che configuriamo in base al layout specifico della nostra pagina. Il risultato dovrebbe essere proprio quello che abbiamo visto all’inizio (vedasi figura 1).

Commentiamo gli aspetti più importanti del codice CSS: le definizione delle proprietà CSS3 standard, in questo caso BORDER-RADIUS e BORDER-IMAGE, vanno replicate con i prefissi dei browser specifici. Questo è necessario finché il supporto di CSS3 non sarà completo, ovvero quando terminerà la fase di transizione verso le nuove specifiche.

Per lo stesso motivo è importante specificare la proprietà BORDER, come abbiamo fatto nella prima riga del codice CSS. Questo serve per indicare al browser che c’è un bordo di una certa dimensione, informazione per certi versi ridondante perché successivamente precisiamo che il bordo è definito da un’immagine di una dimensione ben precisa.

Ricordiamo di provare il codice usando Chrome, per essere sicuri che tutte le proprietà CSS3 siano supportate correttamente. Notiamo che il codice qui sopra tenta comunque di essere cross-browser, perché specifichiamo i suffissi -MOZ e -WEBKIT per gli altri browser (è sempre meglio essere lungimiranti).

Concludiamo con qualche indicazione sull’uso specifico della proprietà BORDER-IMAGE: dopo l’indicazione dell’URL dove si trova l’immagine 15×15 da applicare come bordo, troviamo la parola stretch, che dice al browser di allungare i pezzettini 5×5 in modo da coprire tutto lo spazio necessario (centro compreso). Le altre opzioni sono repeat e round, ma non ci interessano in questa sede. Per ottenere l’effetto trasparenza che abbiamo dichiarato basterà sempre usare la proprietà stretch. Se invece vogliamo cambiare il tipo di trasparenza, o modificare la tonalità della sfumatura, basta intervenire sull’immagine originale e poi ridimensionarla nuovamente nel formato 15×15. Vale la pena provare a fare qualche prova per rendersi conto di come sia facile ottenere un effetto diverso, modificando solo pochissimi pixels nell’immagine originale.