Whether you’re making an application or a web design, it’s useful to have a collection of high quality icons handy. Your users will appreciate the professional touch and ease of navigation that they bring. Over the years I’ve collected a ton of sets, I spent a couple hours digging through them all and compiling this. All downloads are hosted on my server in their original unaltered archives and include a mirror to the author’s website if applicable, this is a proactive measure in case their sites ever disappear.
(more…)
You’ve just made an awesome PNG image with alpha transparency, it looks great in FireFox, but your excitement receives a swift kick in the butt when you test it out in Internet Explorer. Don’t worry, there’s a very easy way to make IE 5.5+ obey your transparency needs. All the guides out there can be really overwhelming, so I’ll make this as quick and painless as possible so you can get on with your day.
First let’s grab the fix by Angus Turnbull and a blank “spacer.gif” image, you’ll need to right click / save as and upload these files somewhere on your web server:
http://www.metatitan.com/files/iepng.htc
http://www.metatitan.com/images/spacer.gif
Open the iepng.htc file and near the top edit the path to spacer.gif to where you uploaded it on your web server. Now add this into your CSS stylesheet and change #yourclass to the class you’re working with, and the URL to where you uploaded it.
img, #yourclass { behavior: url(http://www.yoursite.com/path/to/iepng.htc); }
Now we can have transparent pngs like so:
<div id=”yourclass”><img src=”mypng.png” width=”100″ height=”50″ /></div>
This can make backgrounds defined in “#yourclass” transparent as well. You can mess around it, and define the behavior in a different way if that works better for your project, it’s quite flexible and easy to work with.
