CSS Tip #8 – “Vedo e non vedo”, ovvero: la trasparenza

17 ottobre, 2009 - Tags: css tip, webdesign

Le trasparenze sono un’effetto molto gradevole se ben utilizzato, tuttavia per creare simulazioni di trasparenza spesso si usa Photoshop e successivamente si esporta il tutto come immagine normale.

Da qualche tempo ormai gran parte dei browser (per non dire tutti) offrono il supporto alla trasparenza tramite Css, l’unico vero problema al momento è che ogni browser ha un po una sua sintassi per questo effetto.

Quando i CSS3 saranno completamente sviluppati e supportati da tutti browser potremo finalmente gestire questo effetto con una sola regola Css… per ora invece ci tocca doverci rimboccare le maniche e chiarire un paio di cose .

Attualmente se vogliamo ridurre all’osso gli sforzi abbiamo necessariamente bisogno di queste due proprietà per dare una trasparenza da Css cross-browser:

opacity: 0.4;
filter:alpha(opacity=40);

Entrambi renderanno l’oggetto che subisce queste proprietà trasparente al 40%, la differenza sta che la prima riga è la proprietà “universale” e che ovviamente Internet Explorer ignora, mentre la seconda è appunto la proprietà specifica per il browser di casa Microsoft.

Se vogliamo essere ancora più scrupolosi e precisi (e cross-browser) possiamo aggiungere queste altre due proprietà:

-moz-opacity:0.4;
-khtml-opacity: 0.4;

Anche queste due abbassano l’opacità al 40% , ma si riferiscono ai vecchi browser Mozilla (Firefox 1 e Netscape). Safari pre-Webkit (Safari 1) e Konqueror (famoso nell’ambiente Linux).

Per effetti al passaggio del mouse

Le suddette proprietà funzionano anche applicate ad :hover , tranne nel caso di Internet Explorer… per ovviare questo problema dobbiamo aggiungere una proprietà che si occupa di effettuare il cambiamento di opacità per questo browser, la sintassi non è proprio semplice quindi vi suggerisco di copiare-incollare:

...
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
...

Questa proprietà ricordo serve solo se vogliamo applicare effetti di trasparenza al passaggio del mouse, quindi dovremo definire l’opacità iniziale nella regola base dell’oggetto, e l’opacità al passaggio nella regola con :hover.

Articoli correlati:

• CSS tip #1 – Angoli arrotondati Nel realizzare la nuova versione del mio sito ho voluto utilizzare una proprietà CSS un pò avanti sui tempi, (infatti la troveremo “ufficializzata” con i CSS3), ma che 2 motori di rendering web molto diffusi hanno gia deciso di utilizzare:...