for more articles
How To Create
Photorealistic Post-It Pop-Up
|Have you seen
one of those post-it pop-up? The one that looks so realistic,
with awesome shadow effect. If you don't know what I am talking
about, try opening the following website:
They look awesome don't 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 grabs the attention of your web visitors.
This is good when you want to increase subscription rate to your ezine, or
promote an affiliate 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 get the job done.
But there's one thing that you just don't know. Many pro web programmers
know this, but not the normal web designers ... maybe even most
web designers don't know how to do this.
The secret is in PNG image format.
PNG image format is the little-known image format that you can use on the
web. PNG image format is unique because you can do the Alpha
effect with it. The Alpha effect is where you set transparency
factor on certain areas on the PNG image. That is what makes the
shadow looks so real.
With the Alpha effect, you can set transparency factor from 0% to 100%. So
it can be 30% transparent, 50% or even 79%. Have a look at the
pop-up again, and take a close look at the shadow - Now you know
how it's done.
But there is just one problem - Internet Explorer don't really support PNG
image format. While you can still call PNG image format using
the IMG tag, Internet Explorer ignores Alpha factor. In Internet
Explorer, PNG image just don't appear properly.
So how do we solve this ...
Luckily you can still call PNG image in Internet Explorer and have the Alpha
reflected using a special CSS command. It's the
But this will lead to another problem. Before you can call the PNG image,
you first need to identify the browser your web visitor is
using. If the visitor is using Firefox, Opera, Netscape or any
others, you can call the PNG using the IMG tag. But if it's
Internet Explorer, you need to use the AlphaImageLoader().
image floating over your web content. You can even make the
pop-up disappear using the OnClick event trigger.
If you'd like a complete code and PNG image to your own photorealistic
post-it pop-up, try visiting WOW Pop-Up. Below is the URL
address for WOW Pop-Up where you can get a free set of the code
and the PNG graphic.
About the author:
Iszuddin Ismail published the WOW Pop-Up and is giving away free
code and PNG graphics to your own photorealistic post-it pop-up.
Get a set of four PNG pop-up graphics for free.