Skip to main content

Web Design: Faking Alpha Blending with gifs

pngs are nicer than gifs because they have true alpha blending, not just transparency. However, they don't work in IE. I'm using the "pngfix.js" script to make alpha blending work in IE, but it's just not perfect. The divs that the script adds mess up my CSS. True alpha blending becomes important if you're rendering your image on a complex background such as a gradient.

I found a suitable workaround. If I start with a png and get it to look right in the browser, I can grab a screen shot. Then I trim the outside of the image to make it transparent. Hence, the actual background is "hard coded" into the gif along the edges of where it becomes transparent so that true alpha blending is not necessary, but most of the image is still transparent so that the complex background shows through. Best of all, the gifs are a lot smaller than the original pngs.

I'm sure this trick is well known, but it was new to me. Oh the depths I go through to make IE users happy!

Comments

Anonymous said…
You're wasting your time, IE 7 has proper transparent PNG support with alpha channels, and will be forced on all IE uses in about a months time.

-- Neil
Anonymous said…
You probably should use the PNG by resort to the GIF only if IE6 is detected. You should be able to do it all in javascript.
Anonymous said…
How did I type "resort" there instead of default?
jjinux said…
> You're wasting your time, IE 7 has proper transparent PNG support with alpha channels, and will be forced on all IE uses in about a months time.

I only it were that simple!
Anonymous said…
Why bother doing it with a browser+screenshot when you can do it in any image editor?
jjinux said…
> Why bother doing it with a browser+screenshot when you can do it in any image editor?

That's a good question. It's because I'm using a complex background (gradient, etc.). I can use Firefox to show me how the image should ideally look on the complex background. Then, I can take a screenshot to get it to work in IE. Using transparency around the outside of the image gives me a little wiggle room to be off by a pixel or so, but along the edges of the logo (or whatever) the alpha blending looks mostly right.
Anonymous said…
"You're wasting your time, IE 7 ... will be forced on all IE uses in about a months time."

Dude, you're so wrong. IE6 will be here to haunt us for a long time to come. Here it is March 2007, IE7 is out and still how many corporate desktops still don't have IE7? Lots.

It is amazing how many clueless sheep use that POS they call IE6.
Anonymous said…
"It is amazing how many clueless sheep use that POS they call IE6."

Some of those sheep happen to be potential clients/customers and we still need to reach as many people as possible. Support for IE6 should not be disregarded quite yet, it is still very much used.
Unknown said…
"Some of those sheep happen to be potential clients/customers and we still need to reach as many people as possible. Support for IE6 should not be disregarded quite yet, it is still very much used."

And that's exactly the problem: IE6 sucks, it's old.. Been around since 2000 or so, and will still be around quite some time, sadly.

Any idea how much hassle many webdesigners have to go through to get their websites to work in IE6? IE7 is better, but still far off from FF or many others..

Popular posts from this blog

Ubuntu 20.04 on a 2015 15" MacBook Pro

I decided to give Ubuntu 20.04 a try on my 2015 15" MacBook Pro. I didn't actually install it; I just live booted from a USB thumb drive which was enough to try out everything I wanted. In summary, it's not perfect, and issues with my camera would prevent me from switching, but given the right hardware, I think it's a really viable option. The first thing I wanted to try was what would happen if I plugged in a non-HiDPI screen given that my laptop has a HiDPI screen. Without sub-pixel scaling, whatever scale rate I picked for one screen would apply to the other. However, once I turned on sub-pixel scaling, I was able to pick different scale rates for the internal and external displays. That looked ok. I tried plugging in and unplugging multiple times, and it didn't crash. I doubt it'd work with my Thunderbolt display at work, but it worked fine for my HDMI displays at home. I even plugged it into my TV, and it stuck to the 100% scaling I picked for the othe

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python . Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening. The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for B

Creating Windows 10 Boot Media for a Lenovo Thinkpad T410 Using Only a Mac and a Linux Machine

TL;DR: Giovanni and I struggled trying to get Windows 10 installed on the Lenovo Thinkpad T410. We struggled a lot trying to create the installation media because we only had a Mac and a Linux machine to work with. Everytime we tried to boot the USB thumb drive, it just showed us a blinking cursor. At the end, we finally realized that Windows 10 wasn't supported on this laptop :-/ I've heard that it took Thomas Edison 100 tries to figure out the right material to use as a lightbulb filament. Well, I'm no Thomas Edison, but I thought it might be noteworthy to document our attempts at getting it to boot off a USB thumb drive: Download the ISO. Attempt 1: Use Etcher. Etcher says it doesn't work for Windows. Attempt 2: Use Boot Camp Assistant. It doesn't have that feature anymore. Attempt 3: Use Disk Utility on a Mac. Erase a USB thumb drive: Format: ExFAT Scheme: GUID Partition Map Mount the ISO. Copy everything from