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.

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.