MoebiusMania

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. Aggiornamento 11/08/2011: dalla versione 9 anche Internet Explorer supporta la proprietà "opacity" degli standard Css, anche per l'hover. Quindi le due proprietà "filter" che cito in questo articolo servono solo per garantire compatibilità per gli effetti di trasparenza con le versioni dall'8 in giù.

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. Prova l'effetto!