PNG Background Color Change with CSS

by on Monday, May 24th, 2010

Using the PNG’s transparency ability, I had an idea of changing the color of the PNG button with CSS. PNG’s are usually used to create a drop shadow on an item as it allows the color behind the PNG to show through the shadow regardless of what color is behind it. My idea came from reverse engineering a button thinking of what the shadows and reflections would look like without color. I set a color to the canvas layer and then began drawing transparent gradients over the top of it to creat the shadows and reflections I desired. Once I had a design that I liked, I hid the canvas color and exported the PNG. Then I began experimenting with the background colors through CSS. Here are the steps I use to create the button.

Designing the PNG

Start with a design that is simple so that you can get it into code quickly and begin playing with its colors. I am going to create a button that is similar to what Apple popularized, a split gradient. I am also using Fireworks as I find it quicker and easier to do most of my design work in versus using Photoshop. I am sure that using the steps outlined, you could follow along in Photoshop fairly closely.

Step 1

Open a new document. Set dimensions to 64 x 64. Select a canavas color that is easy to see. I wouldn’t start off with something light (white) as it will be difficult to see your reflections/shadows on while testing the background color.

Step 2

Select the square shape tool. Set the properties to gradient >> linear. Set both colors to black and set the transparencies to “50” and “0”.

Step 3

Draw a rectangle 64 x 32 on the lower half of the square with the darker part at the top. Make the direction of the gradient go top to bottom instead of left to right.

Step 4

Draw a second rectangle 64 x 32 on the upper half of the square with the darker part at the bottom. Make the direction of the gradient go top to bottom instead of left to right. Also set the darker part of the gradient to a transparency of “40”.

Step 5

Change the canvas color. This is to get an idea of how your PNG will look with different colors behind it. Once you find a color you like, make a note of its hexidecimal value as it will be used for the CSS.

Step 6

Make sure you have no color (transparent, checker board) selected on the canvas so that the transparency effect is working for what we need.

Step 7

Export the file as a PNG

Implementing the PNG into HTML and adding CSS

Step 1

Class the div and add your link text

<a href="#">
  <div class="pngButton">
    <p>PNG Button</p>
  </div>
</a>

Step 2

Write the CSS for the div

.pngButton {
  background:url('transparent.png') repeat-x #c00;
  height:64px;
  display:block;
  cursor:pointer;
}
.pngButton:hover {
  background-color:#f00;
}
.pngButton P {
  padding:0 20px;
}

Examples

The examples below all use the same PNG. The background and hover colors are controlled with the CSS classes that have the colors assigned to them. This makes the design easier to manipulate if you need to make color changes, versus having to recreate new images everytime.

Button 1

Button 2

Button 3