In this new series I will write a new CSS trick every day. Oops I don’t know if that is such a good idea… where am I going to find the time? All right I’ll try to post every day.
Here is a tip for all you guys who thought that crazy PhotoShopped design couldn’t be made to display in the browser window: use transparant PNG’s.
Here’s the recipe:
- Just design your page in PhotoShop using layers, lots of layers
- Export all layers as png’s, with full transparency, 24-bit’s, nice quality
- Use the fine pngquant tool to compress the images even more.
- Now place all images in an html page, and give each tag a unique ID. You don’t need to use a width and height, but if you do it would be more cross browser compatible with older browsers.
- Use the following css for the images
- Now give each image an exact position
img#fruit { top:25px; left:40px; } img#meat { top:50px; left:100px; } - I always prefer to use only top and left, since I read horror stories about right and bottom. If you prefer to use percentages that’s fine, but not all browsers can calculate percentages that well, resulting in small pixel offsets.
- add the layering, using z-index. Z-index only works on elements with relative or absolute positioning. The higher the z-index, the more it is ‘on top’.
img#fruit { top:25px; left:40px; z-index:1; } img#meat { top:50px; left:100px; z-index:2; } - Add the page’s text content. You could have done that first, but since we are practicing PhotoShop-design-to-html-conversion we don’t really need text content. Normally you would add a div to the page without any positioning.
img { position:absolute; border:none; margin:0; padding:0; }
update: really cross browser
I realize I forgot to mention some of the cross-browser tips that make your PNG’s work wonders in the crap browser Internet Explorer.
For solid color (or no) background
There are several tools that can patch up a png pretty decent so that it
shows up ok in IE. I now only use apha filters when the image has no
solid color background. For solid colors I use the technique described
here
I know I mentioned pngquant but I later found some more interesting tools. How about pngoptimize? I know that Photoshop saves gamma information in the image, which would distort the final output in IE. You can remove that information using this program.
For real flexibility
For real flexibility you can use the IE proprietary filter css rule. This has the huge advantage that your png transparent images can be placed anywhere.
Here’s an example:
#logo a {
position: absolute;
top:40px;
background: url(images/logo.png) no-repeat top left;
width: 152px;
height: 272px;
}
* html #logo a {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.png', sizingMethod='image');}
}
Unfortunately, there’s a catch. The path you use in the filter is not starting at the same directory as you would in the style sheet. Instead of using the css file path, it starts from the path of the source (aka your HTML file). The other catch is that there is no positioning of the background possible, so you’ll have to position the container instead.
Static images
Wait, it gets better! You can use javascript to automatically have all png images on the page use the filter property. See the following small script that you can include in every page of your site. No thinking required.
fixPNGs = function ()
{
// go through each image in the page and fix them
for ( var i = 0; i < document.images.length; i++ )
{
// only if the image is a png
var img = document.images[ i ];
if ( img.src.test(/\.png$/i) )
{
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', enabled=true)";
img.src="/images/blank.gif";
}
}
};
window.attachEvent("onload", fixPNGs);
[/sourcecode]
The Universe Divided 