[Dritta] PNG, Trasparenze e Internet Explorer...

[ALFABreezE]

Allora...
Una delle domande più ricorrenti che leggo in questo forum è "Ho un'immagine con un'ombra che vorrei inserire in una pagina web in modo che l'ombra si sovrapponesse allo sfondo della pagina" (In realtà non le leggo mai in questa forma, ma questo è il succo della richiesta al quale si arriva dopo una decina di post di "chiarimenti" ;-)p
Nelle FAQ c'è un link che rimanda ad un thread lungo, interessante, ma probabilmente scoraggiante per chi vuole risolvere la cosa in tempi brevi.
Quello che mi propongo di fare in questa sede è un "riassunto" il più conciso possibile per *risolvere* il problema e che sia alla portata di tutti.


Il Formato "PNG"
Partendo dal presupposto che io uso Photoshop, farò riferimento a questa applicazione per la creazione e il salvataggio delle immagini in formato "PNG".
(Qualsiasi apporto in merito ai metodi con i quali altre applicazioni sono in grado di ottenere gli stessi risultati è, naturalmente, più che ben accetto).

Il formato PNG ha due vantaggi fondamentali rispetto al suo più vicino omologo, il GIF: esporta immagini scontornate (quindi con sfondo 'trasparente') senza bisogno di aloni e senza 'scalettature', ma, soprattutto, mantiene le caratteristiche di "opacità" dell'immagine (cosa che il gif non fà).

Esempio:
Abbiamo una scritta con un'ombra nera al 50% che vogliamo inserire su uno sfondo? Con il PNG è possibile; col GIF no. (Oppure sì, ma moollto male).
Oppure vogliamo che la scritta sia Bianca, ma con una trasparenza che lasci intravvedere uno sfondo sfumato? Con il PNG è possibile; il GIF noncipensaproprio.

Bene; da tutto questo deduciamo che il PNG è una cosa "buona" (purché usata con parsimonia, visto che, proprio a causa della quantità di informazioni che si porta dietro, tende a pesare mooolllto più di un GIF).
Come un po' tutti sappiamo, quando una cosa è "buona", in genere fà anche male. E se non fà male, prima oppoi arriva qualcuno che dice che fà male.
Ecco.
A dirci che "faceva male" ciàppenzato Internet Explorer.
Difatti tutte le PNG vengono visualizzate correttamente da tutti i browser dell'universo tranne che da quello di ziobbill.
(Il motivo tecnico è esilarante, ma abbiamo detto di tenerci sul pratico).

Salvare un'immagine in formato PNG
Da Photoshop:
Impostate l'immagine con lo scontorno e i valori di opacità che desiderate, nascondete il livello di "Sfondo" (se ce l'avete) e poi:
- Menu "File" ->"Salva per il Web"
- Selezionare dal menu a tendina sulla destra, tra i vari formati il formato "PNG" (mava'?).
Noterete che ci sono DUE formati "png":
- "PNG 8" che ha più o meno le stesse modalità di gestione dei colori e delle trasparenze del GIF e quindi, almeno in questo contesto non ci interessa.
- "PNG 24" che è quello che invece ci interessa.
Una volta selezionato il "PNG 24" non ci sono particolari 'settaggi' da fare, quindi, se giudicate il vostro file soddisfacente come "peso", procedete con il "Salva".

Visualizzare il PNG
Ohhh... E finalmente arriviamo al punto.
Tanto per rendervi conto del perché mi sto smazzando con 'sta tiritera, prendete il vostro nuovo fiammante PNG appena salvato, inseritelo nel vostro supermegafigo sito UEBB e visualizzatelo con un browser qualsiasi che non sia IE.
UAU! Bello, no? ;-)
Ora visualizzatelo con IE...
...
Ok ...quando siete rinvenuti dallo shock, proseguite a leggere.

Far visualizzare correttamente il PNG ad IE
Qui, le spiegazioni sarebbero un po' tutte d'ordine tecnico, quindi mi limiterò ad indicare una serie di passaggi che dovrete seguire pedissequamente (anche perché non sono tanto sicuro di saperli spiegare).

A). Su questo link: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
scaricate, in fondo alla pagina, dove c'è scritto "Download", la cartella zippata che contiene tutti gli elementi necessarî per far funzionare IE con i PNG.
(Se siete proprio PIGRI, questo: http://webfx.eae.net/download/pngbehavior102.zip è il link diretto).

Nella cartella ci sono 10 elementi, ma quelli che ci interessano sono solo due:
- "blank.gif"
- "pngbehavior.htc"

Prendete questi due file e inseriteli nella stessa directory (sia locale che remota) che contiene la pagina dove avete inserito il PNG dicuisopra.

B). Aprite la vostra pagina (sempre quella che contiene il PNG) col vostro editor preferito ed inserite questo codice:

<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>

nell'head, come ultimo elemento, subito prima della chiusura del tag "</head>".

Ora aprite di nuovo la pagina su IE e..... VUALA'!!

Mi raccomando (e mi ripeto): tenete sempre i file
- "blank.gif"
- "pngbehavior.htc"
- e la pagina contenente i/il PNG nella stessa directory.

Direi che è tutto.
Buon lavoro ;-)

cià
ale

piesse: Per chi volesse approfondire l'argomento da un lato più 'tennico':
http://forum.html.it/forum/showthrea...hreadid=466509
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

[lnessuno]

ottima! grazie 1000 questa serve anche a me

[Ja]{|e]

molto gentile, proprio ieri smanettavo col png, vedevo che salvava la trasparenza ma non riuscivo a visualizzare con ie.....

grazieeeeeeeeeeeeee!!!!!!!!!!!!!!

[Dave-Z]

Originariamente inviato da ALFABreezE
tutte le PNG vengono visualizzate correttamente da tutti i browser dell'universo tranne che da quello di ziobbill.
(Il motivo tecnico è esilarante, ma abbiamo detto di tenerci sul pratico).

dicci, dicci

...in ALFABreezE we trust!!!

[DaN2]

Originariamente inviato da Dave-Z
dicci, dicci

...in ALFABreezE we trust!!!

vojo sapere pure io!

[ALFABreezE]

Niente di che, se non una delle solite cose in stile maicrosoft...

In realtà (almeno da quel poco che ciò capito io) il behavior in questione non aggiunge nulla, ovviamente, ad IE se non l'istruzione di "non tenere conto" del fatto che *non deve* visualizzare correttamente i PNG.
Perché lui, di suo, li avrebbe anche visualizzati bene ma a Redmond pare che abbiano deciso di impedirglielo.

Il behavior lo 'incoraggia' soltanto ad... "essere sé stesso", in pratica. Dopo che la microzozz l'ha tirato su "complessato" ;-)

Cmq... Andate a leggervi gli approfondimenti nei link in fondo al primo post, che magari nonciò capito niente io ;-)p

cià
ale

[Ranma2]

a me non funziona, mi cancella tutta l'immagine

[ALFABreezE]

Originariamente inviato da Ranma2
a me non funziona, mi cancella tutta l'immagine

Posta l'URL della pagina che contiene il PNG così ci diamo un'occhiata.

cià
ale

[Ranma2]

Ho rifatto da zero la pagina e funziona

Una curiosità, come mai il w3c css mi da questo errore se esamino la pagina?

Line: 7 Context : img
Property behavior doesn't exist : url("pngbehavior.htc")

:master:

[ALFABreezE]

Originariamente inviato da Ranma2
Una curiosità, come mai il w3c css mi da questo errore se esamino la pagina?

Line: 7 Context : img
Property behavior doesn't exist : url("pngbehavior.htc")

Beh... è ovvio... voglio dire si sa, no? 'nzomma... ehm..
Mannonvistammaibbenegnente?!! :-PPP

Apparteischerzi... ;-)
Non ne ho la minima idea, ma credo che un approfondimento sarebbe di interesse comune. Io faccio il grafico ed è già un mezzo miracolo che abbia scritto 'sta cosa qua. Se qualche accattiemmellaro / giavascriptaro / ciessessarolo volesse dare il suo contributo, magari riusciamo a perfezionare anche questo aspetto della faccenda.

Fatevi sotto!
E soprattuto fateci sapere!!

cià
ale

piesse: Li hai letti i link per l'approfondimento? Magari lì c'è qualcosa in merito.