Is there a way to do gradients in css/html/javascript only that will work across all the major browsers? (MS IE 5+, Firefox, Opera, Safari)?
Edit: I would like to do this for backgrounds (header, main panel, side panels). Also, would like to have vertical line gradients as well.
Edit: after reading the responses, let's open this up to Javascript solutions as well, since HTML/CSS by itself makes it tougher to achieve.
I've done this before as a gimmick, using javascript like:
var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.width='100%';
div.style.height = 1/count+"%";
div.style.top = i/count+"%";
div.style.zIndex = -1;
parent.appendChild(div);
}
If your requirement is just to have a gradient, you really should use a gradient image set as background-image in css. In my case, I was animating the colors and position of the gradient as well. I can't vouch for now cross-browser it is (for starters, make sure the parent has some position applied, otherwise it won't be a position-container for the absolute positioning.
I'm unclear on the implementation details you are seeking (such as background, or just a border along the side of the window, etc); however, it's possible albeit a little tedious.
One example that comes to mind would be to have n-block level elements, such as divs, and then give them each a small height (a couple of pixels, for example) and then gradually change the background color of each subsequent element.
I use the gradient CSS code generator by colorzilla: http://www.colorzilla.com/gradient-editor/
It has polyfills for IE - but not sure how far back it goes.
I think the short answer is no.
You can create something that looks like a gradient using only css, but to then use it like an image background... I think that is pushing it a bit.
EDIT (feeling silly)
I found the solution: http://en.wikipedia.org/wiki/JPEG
There are lots of ways to create a gradient now. 1. You can create image for it. 2. Use CSS3 Gradient, it can be linear, radial and repeating.
Syntax for linear :
linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);
Syntax for radial :
linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);
For IE6 to IE 9 we can use the filter property or you can also use CSS3Pie.
Following are some referances that will help:
