Last week at work, I was given the task of changing the color scheme of our CMS for a client. It isn’t something we normally do, but the client requested it, and it wasn’t too difficult to do, so we did it.
I say that it “wasn’t too difficult,” because there was a small amount of difficulty involved. Actually, it was more an inconvenience than a difficulty. While it was easy enough to change the color of the links and any colored text, all of those images you see in the screenshot to the right (which I edited to show the before-and-after colors) had to be changed individually. It wasn’t hard, just time consuming.
That got me thinking about how to quickly change the colors of images, which lead me to ponder, “wouldn’t it be great if I could change the color of images using CSS?” Not only would it be great, it’s entirely possible and very easy to do.
As a proof of concept, I made this page. Take a look at the code and you should get a pretty good sense of what’s going on (unless you’re using IE6, in which case, update your browser). Starting from the top left and moving to the right, and then down, here’s what each image shows:
- This is the original 24-bit PNG (note that the border around the images is added in the CSS) with alpha transparency. To help illustrate the transparent area in the image, I added Photoshop’s default transparent background texture. Each of the smiley faces on the page uses this exact same PNG, which means that the browser only has to download the image once. This means fewer HTTP requests and fewer images to download, which decreases load time.
- The original transparent PNG with a solid red color behind it. This gives you a better sense of the white gradient at the top-left of the smiley face.
- The same as #2, but with a blue background. Again, it’s important to note that these are exactly the same image and the colors are being filled in by the browser.
- Numbers 4 through 6 all demonstrate the same basic principle, but each in a slightly different way. This image shows that you can use an image as a background, not just colors.
- In this case, the image is my webcam, which changes every 60 seconds. Also, the background is being positioned using CSS.
- Here I used an animated GIF.
I do want to point out that I’m not breaking any new ground here. I’ve been using this same basic technique on my website since February of 2007 to add rounded corners on my webcam images. I don’t know why it didn’t occur to me then, but I’ve shown my test page to a few people who all had big, excited reactions.
The implications of what you can do with this sort of technology are vast, and in May of 2007, David Hellsing wrote a fantastic post over on Dave’s Kitchen about how you can take advantage of the effect. I won’t go into details here about what David came up with, but check it out because it is brilliant.
Bringing this all back to the CMS at work, our icons are single-color images (that is, a single color besides white and black). If the colored areas were transparent and the backgrounds of all the images set to a solid color using CSS, we could easily have changed the color of every one of those images by changing a single value in the CSS. In fact, with a little planning, we could change every single color that needs to be changed (links, colored text, message bar, and icons) by changing one value in our CSS code.
No wonder people are getting so excited about this.0 People like this. Be the first!