Gradient colours

I would be very grateful if anyone could tell me how gradient colours are applied to objects on an HTML page. By objects i mean background, panels e.t.c.

Thanks.

crop a line from your design:
width:1px
height: the length of your gradient

save it

open your html editor

type this in your stylesheet:

body{
background: url(imagelocationhere.jpg) repeat-x;
}

very easy!

Thanks!

Yeah, that would be the only way to do it. There's no way to do it (as of yet) in CSS or HTML.

yea, i am a graphic designer so i usually just make the gradient in photoshop, but its all good

The best part about that is you save a lot of load time using a one pixel image. If you were to cut out an entire image and use it as a background it would slow down load time quite a bit.

once we get CSS3 we can do it with CSS

Originally Posted by Liam once we get CSS3 we can do it with CSS

Awww one day my friend, one day.

Originally Posted by Liam once we get CSS3 we can do it with CSS

I've seen some of the stuff we could do with CSS3 but I've never heard about gradients. This is going to be amazing!!

Originally Posted by -NEO- crop a line from your design: width:1px height: the length of your gradient save it open your html editor type this in your stylesheet: body{ background: url(imagelocationhere.jpg) repeat-x; } very easy!

There is another neat trick: if you want to have gradients fading out to background color of your page you can create a transparent png that fades from page background color to transparent, and then you can css:

body{
background-color:#FFF;
}
.element1{
background: #000 url(imagelocationhere.png) repeat-x;
}
.element2{
background: #F00 url(imagelocationhere.png) repeat-x;
}

Needs a PNG fix for IE6 though