in css - cascading style sheets how can we get the shaded effect?

Question

using css can we able to produce shaded color effect or we have to take a small image and tile it for the entire area ?? Thanks in advance

Answer 1

small image and tile. Transparent .pngs have no support in IE6 but work in IE7 and everything else. the alpha channel in css doesn't give you the gradient feel for a drop shadow and has limited support as well. Use a .jpg with a gradient black to desired color.

Answer 2

First, decide the main background color for the area involved. Then decide what color you want to fade into. Go to a graphics editor and create a "gradient" image, fading from one of those colors to the other. Then set up your css to place the image and repeat it appropriately. For example:

I have a web page whose main background is #ededbc. I want it to fade off, to the right, to the color #c9f.

I went into Adobe Photoshop and created a 218x31px gif gradient named my.gif with #ededbc on the left and #c9f on the right.

Then I coded my css with the div as

background: #ededbc url("my.gif") repeat-y right top;

This repeats the .gif down the right side of the div, giving the appearance of a fade.