« I Wrote About My Morning Jacket For Much Music
Stop Drop Downs… And Roll »

Efficient Use Of Transparent PNGs

Posted By:
Matt
Posted On:
May 27th, 2008
Posted In:
CSS & XHTML
Comments:
One Response, Join The Conversation.

You can do a lot with transparent PNGs but it’s not very often that I come across someone doing something useful with them. Sure you can make a scuba divers light get brighter as you scroll deeper (CSS Zen Garden) or make icons look sweet with a drop shadow on all types of different backgrounds but that’s basic, almost useless stuff compared to what MAC cosmetics is doing with transparent PNGs on their site.

Kat was trying to send her friend an image of a colour of eye shadow, but every time she sent the image it was grey instead of the colour of the eye shadow. She asked me “WTF?”. I checked it out, they’re using a solid background colour with a transparent PNG over top. Amazing.

Instead of having to generate thousands of images and load them individually, they have one image with a bunch of background colour hex codes stored in a database. It’s genius and it probably saves them a bunch of money.

Check it out by clicking on the link below and then checking out any of the thumbnails. You can also click on the thumbnails for a bigger version of what’s going on. They have to use some simple JavaScript to force the PNG transparency in IE6 but it’s well worth it.

MAC Cosmetics

Similar Posts:

  • background: #3f3

Comments

  1. Pat Says:
    May 29th, 2008 at 8:35 pm

    Stop looking at lipstick, your lips are fine. And you’re not a giiiirl

Leave a Comment

Show Background