Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 20
  1. #1

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

    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:
    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
    If you can keep your head when all about you are losing theirs,
    it's just possible you haven't grasped the situation.

  2. #2
    Utente di HTML.it L'avatar di lnessuno
    Registrato dal
    Feb 2002
    Messaggi
    2,738
    ottima! grazie 1000 questa serve anche a me

  3. #3
    Utente di HTML.it L'avatar di Ja]{|e
    Registrato dal
    Aug 2002
    Messaggi
    129

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

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

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

  4. #4

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

    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!!!

  5. #5
    Utente di HTML.it L'avatar di DaN2
    Registrato dal
    May 2002
    Messaggi
    524

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

    Originariamente inviato da Dave-Z
    dicci, dicci

    ...in ALFABreezE we trust!!!
    vojo sapere pure io!

    sono un'ombra che non si vede che in uno specchio
    hai mai visto un'ombra alzarsi da terra per riflettersi nello specchio?

  6. #6
    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
    If you can keep your head when all about you are losing theirs,
    it's just possible you haven't grasped the situation.

  7. #7
    Utente di HTML.it L'avatar di Ranma2
    Registrato dal
    Mar 2003
    Messaggi
    2,667
    a me non funziona, mi cancella tutta l'immagine

  8. #8
    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
    If you can keep your head when all about you are losing theirs,
    it's just possible you haven't grasped the situation.

  9. #9
    Utente di HTML.it L'avatar di Ranma2
    Registrato dal
    Mar 2003
    Messaggi
    2,667
    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:

  10. #10
    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.
    If you can keep your head when all about you are losing theirs,
    it's just possible you haven't grasped the situation.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.