Alex Rivera | Logout

CSS (perhaps with Compass): Cross-browser gradient

Asked 2011-04-14T14:42:25.513
12

I would like to get a gradient in CSS (perhaps through Compass) that works in every major browser, including IE7+. Is there an easy way to do this (without writing a lot of code, and without a custom image file)?

I looked at Compass's gradient mixin, but it does not work with Internet Explorer.

Any ideas? (It does not need to be Compass -- I am happy install something else.)

Edit: What I am trying to get is some framework (like Compass?) that generates code like what Blowsie posted that's been tested across browsers. Basically like the Compass gradient mixin I mentioned, but with IE support. (I am a bit wary of just rolling my own SCSS mixin and pasting in blocks like Blowsie's code, because I haven't tested it and do not have the resources to do so.)

css background cross-browser gradient compass-sass
Edit
Report

2 Answers

2

The code I use for all browser gradients..

            background: #0A284B;
            background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
            background: -moz-linear-gradient(top, #0A284B, #135887);
            background: -o-linear-gradient(#0A284B, #135887);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
            zoom:1;

You will need to specify a height or zoom:1 to apply hasLayout to the element for this to work in ie

answered 2011-04-14T15:44:48.527
-1

While gradients are of limited complexity, they're complex enough to require what you would consider "lots of code".

Consider:

  • starting colour, ending colour and the hexadecimal math required to transition between one and the other
  • The number of "steps"
  • The width/height of each step
  • Since there is no pure CSS way of doing this, it means rendering HTML, one element for each colour/step, without messing up your existing HTML

So, no, without a plug-in that does all of this for you, it would require a bit of code, or an image.

answered 2011-04-14T14:53:27.547

Your Answer