Come creare i pop-up di fotorealistico Post-It

Avete visto uno di quei pop-up post-it? Quello che sembra così realistico, con effetto ombra impressionante. Se non sapete di cosa sto parlando, provare ad aprire il seguente sito web:

http://myhobbybooks.com/wowpop

Guardano impressionante non è così?

E qualcosa di simile è sempre buona per il vostro web campagna di marketing. Una ragione, non si ottiene mai bloccato da bloccanti pop-up. E un altro, esso realmente afferra l'attenzione dei tuoi visitatori web.

Questo è bello quando si vuole aumentare il tasso di abbonamento al vostro ezine, promuovere un programma di affiliazione o addirittura aumentare le vendite.

Ma chiedo, come lo fanno? Si pensava che si può raggiungere il risultato simile e si tenta, provare e provare... hai provato GIF immagini, immagine JPG, nessuno di quelli possono ottenere il lavoro fatto.

Ma c'è una cosa che proprio non so. Molti programmatori web pro lo sanno, ma non il normale web designer... forse anche più web designer non sanno come fare questo.

Il segreto è nel formato di immagine PNG.

Formato di immagine PNG è il formato di immagine poco noti che è possibile utilizzare sul web. Formato di immagine PNG è unico perché si può fare l'effetto Alpha con esso. L'effetto Alpha è dove si trova fattore di trasparenza su alcune aree dell'immagine PNG. Questo è ciò che rende gli sguardi ombra così reale.

Con l'effetto Alpha, è possibile impostare il fattore di trasparenza dallo 0% al 100%. Così può essere trasparente il 30%, 50% o addirittura il 79%. Date un'occhiata a pop-up, ancora una volta e prendere un'occhiata da vicino l'ombra - ora sapete come è fatto.

Ma c'è un solo problema - Internet Explorer davvero non supportano il formato di immagine PNG. Mentre si può chiamare ancora formato di immagine PNG utilizzando il tag IMG, Internet Explorer ignora fattore alfa. In Internet Explorer, immagine PNG appena non appaiono correttamente.

Così come noi risolvere questo...

Per fortuna è ancora possibile chiamare immagine PNG in Internet Explorer e di avere che l'alfa riflesso usando un comando speciale di CSS. È il AlphaImageLoader().

Ma ciò porterà ad un altro problema. Prima si può chiamare l'immagine PNG, in primo luogo è necessario identificare il browser che sta usando il vostro ospite di web. Se il visitatore è utilizzando Firefox, Opera, Netscape o qualsiasi altro, è possibile chiamare il PNG utilizzando il tag IMG. Ma se si tratta di Internet Explorer, è necessario utilizzare il AlphaImageLoader().

E, naturalmente, questo può sempre essere risolto con un po' di Javascripting. E con un po' più Javascript e CSS, si può avere l'immagine PNG galleggianti sul tuo contenuto web. Si può anche fare pop-up scompaiono utilizzando il trigger di evento OnClick.

Se si desidera un codice completo di immagine PNG per il proprio pop-up di fotorealistico post-it, provare a visitare WOW pop-up. Qui sotto c'è l'indirizzo URL per WOW a finestra dove è possibile ottenere un set del codice e la grafica PNG.