I found this cool site where you can use an online tool to generate the CSS for cross browser gradients. Unfortunately it doesn’t work for Internet Explorer 8, so I need to figure that out. I did find this other site that showed the CSS code below but that did not seem to work either.
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.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); }
Spotted this on Jake’s twitter feed yesterday and quickly gave it a try. Unfortunately, the BlackBerry 9630 does not render the gradient either. I thought it was supposed to support most of webkit outside of JS DOM manipulation… CSS apparently is a little light as well, at least with v5.0.0.484… which is a shame as it would really provide a cheap way to liven up light-weight, low bandwidth web apps.
Edit: Oops – I actually tried THIS ONE:
http://www.colorzilla.com/gradient-editor/
This one works a bit better for IE (even 6) and at least will provide a monochrome block in the BlackBerry browser.
http://www.colorzilla.com/gradient-editor/
Very cool, works great!