CODEWITHSUNDEEP
gradient
joshjdevl
joshjdevl

Reputation: 7212

gradients using only html and css and javascript?

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.

Upvotes: 5

Views: 2217

Answers (5)

Avdhut
Avdhut

Reputation: 160

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:

Mozilla MDN

CSS3File

Upvotes: 0

Mary Camacho
Mary Camacho

Reputation: 470

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.

Upvotes: 1

Ian G
Ian G

Reputation: 30234

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

Upvotes: 0

Jimmy
Jimmy

Reputation: 91432

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.

Upvotes: 3

Tom
Tom

Reputation: 15940

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.

Upvotes: 2

Related Questions