View Full Version : Alpha PNG's

08-07-2005, 03:30 PM
Decided to branch out my designs a bit, and inspired by the great work of HarbingerOTV ( ;) ), I want to try out a few things but I'm not sure where to start.

I've built this, using an alpha PNG -

Although I want the white background of the div to be this image -

And it needs to work in gecko as well as IE. Any help much appreciated! :)

08-07-2005, 04:43 PM
There are HTC's that give PNG support.... or @least I thought there was

08-07-2005, 05:48 PM
Didn't really help, I just need to set the background of that DIV to be the old paper, while keeping the transparency around the edges as it is now.

08-07-2005, 07:37 PM
well I guess I should help ( ;) )

You have photoshop? That's how I'll explain it.

Open your old_paper.jpg and the cube_alpha1.png and then drag the cube.png over on top of the old paper image. ctrl+click the layer and then move the selection to the paper layer. select inverse and delete. Now turn off the cube image and you should have the old paper cut out like the png is.

Saving it as a png-24 makes a 500k file.

You can "pretty" it up by copying the layer. ctrl+click it and expand it by 2-3px. Fill it with a darkwer shade of brown and gaussian blur it a little. Now the funny stuff. Save the image as a png-24. then turn of the blured layer and save it as a gif.

when you use the alpha filter for IE, and link inside that div will not work. Its sort of like the filter actually placese the trasparancy on top of everything else. sort of z-index: infinite.

If your site is going to stay 512x512 you can esily slice the image up.

slice off the top and bottom and save those as images. Then slice 3 vertical columns out of whats left over. Your basically cutting the transparent parts off.

In your code forget using the P margins. make 5 divs inside of your container.
the top/bottom/left and right will have a png as the background and the center will have a jpg. That way you won't have to worry about the links not working. I attached a pic showing a possible way to cut it up. do the same thing for the gif as well (you did save the gif right? ;)

In your code:

#container_top { f\ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='top_slice.png',sizingMethod ='image');
background /**/: url(top_slice.gif) top center;
width: ?;
height: ?;
#container_top[id] {
background: url(top_slice.png) top center;

then you can do the same for the left/center/right/bottom sections.

that code makes it where IE6 loads the alpha filter. Any thing less than IE6 will load a gif. It won't be as pretty but at least it won't be that ugly gray box either. And then Browsers that support selectors will load the png as normal.

08-07-2005, 07:53 PM
Thanks! I'll see what I can do lol :thumbsup:

Tristan Gray
08-08-2005, 02:04 PM
I have a javascript that allows IE 5.5 or better to correctly render png transparencies as well if someone would like it.

08-11-2005, 05:13 AM
yes I really am in need of it I cannot use the .htc behavior because I need the script to be in the html page.......

please give me the code.

08-11-2005, 05:34 AM
As far as I know, the main javascript being used for pngs is sleight.js or ds-sleight.js (my fav). The only issue with that is it doesn't work for backgrounds. I usually find it best to use Microsoft's "filter."

Tristan Gray
08-11-2005, 01:57 PM
Well this place won't allow me to attach a javascript file so google png fix. I'm inclinde to agree that it is decent enough for something simple but make sure that assuming it does not work the page deprecates gracefully.

I used to use it to overly a logo over a background image which worked fine because worst case scenario IE added a light blue sort of background to the logo image that didn't look terrible anyway.