Chiunque di voi abbia a che fare con la creazione di siti web, saprà che le immagini png 24-bit sono le uniche che mantegono una adeguata trasparenza, a differenza delle gif che lasciano uno sgradevole alone non trasparente attorno alle ombre o, peggio ancora, appaiono tutte "seghettate" in mancanza di tale alone.
Purtroppo le PNG sono supportate solo dalla versione 7 di Internet Explorer, mentre nelle versioni precedenti vengono riprodotte con uno sfondo azzurrino al posto della trasparenza.
Come sopperire a questo problema?
Ci sono molte soluzioni stilistiche accettabili, come ad esempio creare una gif che abbia un alone dello stesso colore dello sfondo su cui la andremo a posizionare, oppure evitare ombre troppo "sfumate", ma da un po' di tempo c'è anche una soluzione più interessante.
Si tratta di un hack che risolve il problema su IE 5.5 e 6, grazie ad un css, un javascript e una immagine gif trasparente di 1x1 pixel.
Potete scaricare tutti i file necessari, e leggere una guida completa, a questo link: http://www.zod.it/index.php?option=com_content&task=view&id=12&Itemid=27
Buon lavoro!
Aggiornamento Luglio 2008
Per un sito che stavo realizzando, ho voluto testare uno di questi fix per png. In particolare ho voluto provare la soluzione proposta da zod.it ed anche questa soluzione (ecco la pagina di esempio). Purtroppo in entrambi i casi, la resa grafica era perfetta anche in IE6, ma ho notato che, lasciando aperta la pagina web in cui era presente il fix, senza muovere il mouse per qualche minuto, tutto il monitor cominciava a tremare e sfarfallare in modo terribilmente fastidioso, e non c'era verso di farlo smettere, neanche uscendo dalla pagina.
Questo problema mi era già stato segnalato da un collega, quindi sconsiglio a tutti di usare questi fix, finchè non si capisce qual è l'origine del bug.
Vedo ora che zod.it segnala anche questa soluzione, utilizzando jQuery: http://jquery.andreaseberhard.de/pngFix/
Sinceramente non l'ho ancora testata... Vi farò sapere!
6 commenti:
...evvai ennesimo aiuto... mitico!!! :D:D:D
Thx... :)
pngFix l'ho usato io, e funziona, ma solo con immagini relative ai tag "img" non vale per le immagini di background, infatti per aggirare quest'altro problema ho usato il file htc "iepngfix.htc" con relativo behavior nei css ma vale solo per immagini di background che non si ripetono.... adesso cerco un hack proprio per le immagini di background che si ripetono...qualcno mi da un consiglio?
Io il pngFix l'ho usato e funziona bene, anche con le immagini in background...
http://jquery.andreaseberhard.de/pngFix/
Dovrebbe funzionare anche con le imm in background...
ma ti funziona anche con le immagine che si ripetono?
"background:#fff url(../img/B-G_containers.png) center center repeat-y;"
tipo in questo caso che B-G_containers si deve ripetere verticalmente perchè è lo sfondo del containers
Con il background che si ripete nn l'ho mai provato, ma in teoria dovrebbe funzionare...
...dovrei fare un test, ma ora non ho ie 5 qui per provare...
Appena riesco ti faccio sapere.
Io non riesco a farlo funzionare.
ho lincato i 2 files dall head come dice, e ho messo quel pezzo di codice javascript, ma niente.
Non capisco cosa sono tutti gli altri files che sono nello zip. Alcuni di loro vanno collegati alla pagina come i 2 sopra??
Posta un commento