PNG Background Color Change with CSS: Part 1

PNGs are one of the most useful image types in the web design world, mostly because of their transparent ability. Most designers use them to create a drop shadow on an item and allow the background color surrounding the PNG to show through the shadow regardless of the background’s color. I began to reverse engineer 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 gradients that were transparent over the top of it to creat the shadows and reflections I desired. Once I had a design that I liked, I put it into the HTML. That brought on this tutorial.

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.

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 on while testing the background color.



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″.



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.



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″.



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.



6. Set canvas to transparent

Make sure you have no color selected on the canvas so that the transparency effect is working for what we need.



7. Save the file as a PNG

Implementing the PNG into HTML and adding CSS

1. Make a div


<div id="pngButton">
<p>PNG Button</p>
</div>


2. Write the CSS for the div


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


See an example