Ultimamente mi sono imbattuto nella realizzazione di siti web che facevano frequente uso delle trasparenze, utilizzandole per loghi, immagini o sfondi di alcune porzioni del sito. Ho potuto così approfondire meglio la questione, anche perché ho dovuto affrontare parecchi problemi di compatibilità per cercare di ottenere un sito cross browser.
Cercherò di ricapitolare le varie tipologie di trasparenza e le problematiche del caso, da utilizzare come promemoria anche per me. 🙂
1) TRASPARENZA CON I CSS
E’ possibile rendere semitrasparenti porzioni del sito, utilizzando alcune regole da inserire nel CSS. Premetto che questo metodo non permette la corretta validazione del foglio di stile perché fa uso di regole presenti nei CSS3 o proprietarie di Internet Explorer, che sono comunque compatibili con tutti i moderni browser a partire da IE6. Ecco il codice:
div.esempio {
background: #000;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}
Le tre regole vanno utilizzate contemporaneamente e permettono di rendere il div “esempio“, che è stato riempito con il colore nero, semi-trasparente al 70% (0% totalmente trasparente, 100% colore pieno). La prima (filter) vale per IE mentre le altre funzionano correttamente sia per Firefox (o tutti i browser che utilizzano come motore di rendering Gecko) che per Opera o Safari.
La particolarità di questi stili è che l’effetto non viene applicato solo al background del div, ma anche a tutti i suoi contenuti (immagini o testi), facendo diventare tutto semi-trasparente.
Per aggirare questo problema di solito realizzo un div vuoto a cui applicare il colore di sfondo con l’effetto trasparenza, per poi posizionarlo (tramite z-index) al di sotto del div che contiene le informazioni.
Il limite di questa soluzione è che obbliga a lavorare con dei div di dimensione predeterminata con posizionamenti assoluti, visto che il div con la trasparenza non può adattarsi essendo privo di contenuti.
A breve pubblicherò altri due casi di effetti trasparenza, realizzati però attraverso l’uso di immagini in formato png, dove la completa compatibilità cross browser è più difficile da mantenere.