Click Here
for more articles |
|
|
How To Create Photorealistic Post-It Pop-Up |
by:
Iszuddin Ismail |
Have you seen one of those post-it pop-up? The one that looks so realistic, with awesome shadow effect. If you do not know what I am talking about, try openingfollowing website:
http://myhobbybooks.com/wowpop
They look awesome do not they?
And something like this is always good for your web marketing campaign. One reason, it never gets blocked by pop-up blockers. And another, it really grabsattention of your web visitors.
This is good when you want to increase subscription rate to your ezine, or promoteaffiliate program, or even increase sales.
But you wonder, how do they do it? You thought that you can achieve similar result, and you try, and try, and try... you tried GIF image, JPG image, none of those can getjob done.
But there's one thing that you just do not know. Many pro web programmers know this, but notnormal web designers ... maybe even most web designers do not know how to do this.
The secret is in PNG image format.
PNG image format islittle-known image format that you can use onweb. PNG image format is unique because you can doAlpha effect with it. The Alpha effect is where you set transparency factor on certain areas onPNG image. That is what makesshadow looks so real.
WithAlpha effect, you can set transparency factor from zero% to onezerozero%. So it can be threezero% transparent, fivezero% or even sevennine%. Havelook atpop-up again, and takeclose look atshadow - Now you know how it's done.
But there is just one problem - Internet Explorer do not really support PNG image format. While you can still call PNG image format usingIMG tag, Internet Explorer ignores Alpha factor. In Internet Explorer, PNG image just do not appear properly.
So how do we solve this ...
Luckily you can still call PNG image in Internet Explorer and haveAlpha reflected usingspecial CSS command. It'sAlphaImageLoader().
But this will lead to another problem. Before you can callPNG image, you first need to identifybrowser your web visitor is using. Ifvisitor is using Firefox, Opera, Netscape or any others, you can callPNG usingIMG tag. But if it's Internet Explorer, you need to useAlphaImageLoader().
And of course, this can always be solved withbit of Javascripting. And withlittle more Javascript and CSS, you can havePNG image floating over your web content. You can even makepop-up disappear usingOnClick event trigger.
If you'd likecomplete code and PNG image to your own photorealistic post-it pop-up, try visiting WOW Pop-Up. Below isURL address for WOW Pop-Up where you can getfree set ofcode andPNG graphic.
Aboutauthor:
Iszuddin Ismail publishedWOW Pop-Up and is giving away free code and PNG graphics to your own photorealistic post-it pop-up. Getset of four PNG pop-up graphics for free. http://WOWPopUp.com
Circulated by Article Emporium
|
|
