Ess - Sibran Lens

CSS gradients

Posted by Sibran - 25/04/07 at 03:04:33 pm

This is an easy way to change the color of your gradient, using png and body background color.

Step 1: Create a gradient png

- Open Photohop
- file > new
- 17 x 800 pixels
- make a gradient from white to transparent
- file > save as > PNG

Step 2: The css

IE is the big problem with PNG, so we have to use the filter hack.

body {
margin: 0;
padding:0;
background: #5788b2;
}

To change the color of your gradient, you only have to change the background color.

#gradient {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
width:100%;
height:800px;
}

This filter is for IE, the height is to show the gradient, you can delete it because the div will follow your content.

*>#gradient {
background:url(gradient.png) top left repeat-x;
}

This ID for the other browers, IE can’t read *>.

Step 3: HTML

<div id="gradient">
Gradient flow
</div>

The result

With only changing the background color, you have a nice gradient. You can change the gradient PNG for some other gradient effects. The only downside is that you have to put every div inside ID gradient on position relative and a higher z-index to make your links work.

I have tested it in:
- Firefox (mac en pc)
- IE 6
- IE 7
- Safari

View the result here

1 Comment »

RSS feed for comments on this post. TrackBack URI

1. Nice trick, even if never will be able to produce as neat gradients as you can if you make them for each individual colour

   Comment by Fredrik Wärnsberg — April 26, 2007 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spread the word and save a piece of the planet

Search