Alpha PNG8 in Fireworks 10.08.2008 @ 01:12pm
Okay so this isn't entirely XHTML & CSS related but it can help save the additional XHTML, CSS and frustration of accommodating IE6's lack of support for transparent PNGs.
As I did, you're probably thinking that it isn't possible to have an alpha PNG8, they're just like GIFs right? ... wrong! Discovering that fact has made life so much easier for me and has saved countless duplications of images.
Using Fireworks you can save an image as an aplha PNG8 which preserves it's transparency in all modern browsers and just looks like a choppy GIF in IE6. Obviously this isn't ideal for all transparency situations but I have been able to use it for most of my transparent needs without sacrificing too much in as far as aesthetics go!
So, how do you do it? Let's get to the point here...
In Fireworks create a new white canvas (I've set my dimensions to 500x300) and draw a circle shape in blue. Click the preview button and ensure the 'Opimize and Align' panel is expanded (press F6). You should see something like the following:
Within the 'Optimize and Align' panel, make sure that PNG8 is the selected format and change the "No transparency" drop down to "Alpha transparency". You should now see the following (click image to enlarge):
Now all you need to do is export the file and that's it! Click File > Export and save to your desired location. If you preview the image in modern browsers, it will look as follows:
I have changed the background colour in my browser to show the transparency. Now in IE6, you see the following:
So as you can see, it's not perfect in IE6 but it's not bad either!
What people think...
Latest entries
Categories
Who am I?
I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.
Comments have been disabled.