Posts Tagged opera

CSS Gradient Background – Cross Browser!

Posted by Howard Yeend in web on April 2, 2010

You read that right. This works in:

  • Firefox >=3.6
  • MSIE >=5.5 (!)
  • Safari >=4
  • Chrome

Oh Em Gee, I’ve got a CSS-applied Gradient.

How neat is this?

I mean really, this is super cool.

And it degrades gracefully in older browsers and Opera.

My boss Mike passed this little CSS gem to me, and now dear reader I pass it to you. It was orignally developed by FakeDarren, who posted a great little CSS button example. I find it useful for those times when designers get all fancy with gradiented backgrounds.

I’ve condensed Darren’s CSS down to these four lines plus comments, which will give you the lovely Green-to-Black CSS gradient background you can see above.

  .gradientV{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and https://puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
  }

And as you may have guessed by the ‘V’ in the class name, you can also do horizontal gradients – here are some more examples for left-right gradients, and we see what happens when we apply animations to a gradiented DIV.
Read the rest of this entry »

, , , , , , ,

55 Comments