GIF semi-trasparenti ed IE6
Trasparenza ed IE6 non vanno molto d’accordo.
Esistono particolari hacks che permettono di visualizzare correttamente PNG trasparenti su IE6, come l’ormai noto IE PNG FIX, che permette al proprio sito di visualizzare PNG trasparenti anche su IE5+, con poche righe di CSS ed un file denominato iepngfix.htc ( vedi http://www.twinhelix.com/css/iepngfix/ ), senza dover apportare modifiche al proprio codice HTML.
A me francamente questi hack piacciono molto poco, a volte ho avuto problemi di performances su pagine contenenti parecchi PNG, così ho deciso di tornare ad utilizzare il caro vecchio formato GIF per tutte quelle icone che richiedono zone di trasparenza.
In questi giorni ho avuto però la necessità di realizzare una GIF “semi-trasparente”, da utilizzare come background di un div per simulare una “zona di selezione” all’interno di un grafico… cosa scopro? Che le GIF gesticono solamente la trasparenza on-off “in modo binario”, e non gestiscono un canale alpha … argh!
Tratto da http://www.icongalore.com/xp-icon-articles/alpha-channel-explained.htm :
Tipi di file di supporto che l’alfa
Di seguito sono riportati il tipo di file che supporto del canale alfa:
- TIFF TIFF
- TGA TGA
- PNG PNG
- PSD (Photoshop)
- GIF (alfa speciale)
TIFF, TGA, PNG, PSD, GIF tutti alpha sostegno, ma in realtà solo PNG e GIF sono utilizzati per applicazioni e il web. Gif, tuttavia, utilizza un particolare tipo di alfa. Al posto del canale alpha in una immagine GIF contenenti gradi di trasparenza, ha solo un interruttore on / off trasparenza. Ciò significa che i pixel all’interno di un’immagine GIF può essere completamente opaco o completamente trasparente. Non c’è via di mezzo. PSD è il formato di Photoshop, e può essere utilizzato nella maggior parte delle applicazioni Adobe.
E’ possibile però ottenere un risultato cross-browser tutto sommato accettabile realizzando una immagine GIF contenente una specie di “griglia” che vede alternati pixel colorati a pixel trasparenti.
Qui trovate alcuni background già pronti: http://www.wannabegirl.org/translucent/
Oppure la potete realizzare con gimp, con pochi click.
Aprite Gimp, create una nuova immagine (File -> New) di soli 4 pixel (2×2) stando attenti a selezionare “Trasparenza” come colore di riempimento dello sfondo.
Utilizzando lo strumento di zooming, ingrandite più che potete l’immagine, così da avere evidenti i 4 pixel che compongono l’immagine.
Selezionate poi lo strumento “Matita”, e selezionate la punta con la dimensione più piccola possibile (da 1 pixel).
Andate poi a colorare in maniera alternata i 2 pixel in diagonale, così come in figura.
Salvate l’immagine in formato GIF ( File -> Salva come … -> Nome: selection.gif ).
Utilizzatela ora come background di un div, attivando il background repeat, ad esempio così:
<html>
<body>
<div style=”background-image: url(‘cartina_italia.gif’); height: 350px; width: 300px;”>
</div>
<div style=”background-image: url(‘selection.gif’); background-repeat: repeat; border: 1px solid #3399FF; height: 100px; left: 50px; position:absolute; top:50px; width: 100px;”>
</div>
</body>
</html>
Ed il risultato sarà più che soddifacente! Testato su IE6, IE7, IE8 e Firefox.
Qui il file selection.gif generato nell’esempio sopra, se riuscite a vederlo 
Stay tuned.
Commenti