CSS Tip #8 – “Vedo e non vedo”, ovvero: la trasparenza
Scritto da Salvo il 17 ottobre 2009 con 1 commento
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ù.
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. Prova l’effetto!
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 [...]...
- CSS Tip #12 – Chi supporta i CSS3? Da qualche anno si dice che i CSS3 siano alle porte…. tuttavia la loro ufficializzazione non è ancora avvenuta e non si sa neanche quando avverrà. Ma nonostante tutto alcuni [...]...
- CSS tip #2 – Posizione, Z-Index e PNG Sono 3 piccoli argomenti strettamente connessi per ottenere un’effetto interessante: fissare immagini in layout su vari “livelli“. Per intenderci, ricreare l’effetto della banda “Too Cool for IE” che vedete su [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!