Admin Forum:Gradient effect

Hi. How do I set up gradient effects for different browsers? I'm using this code:

.gradientbg { background-color: linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-color: -o-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-color: -moz-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-color: -webkit-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-color: -ms-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); }

Am I doing it right? I know gradients don't work for IE. How do I set up a definite color for IE and gradient for others? Basically I'm trying to reproduce the gradient blue of the Wikia buttons. ―  T hailog  10:27, December 26, 2011 (UTC)


 * That's close, but not quite there. You need to set a  (or shorthand  ) property instead of  .   however can be used to define the color for browsers without gradient support. So the result should be:

.gradientbg { background-color: #008ce3; background-image: linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-image: -o-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-image: -moz-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-image: -webkit-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); background-image: -ms-linear-gradient(bottom, rgb(0,109,176) 38%, rgb(0,140,227) 69%); }


 * Alternatively, you can reproduce the button gradients by using the  class. — Sovq 10:47, December 26, 2011 (UTC)


 * Thank you! ―  T hailog  13:04, December 26, 2011 (UTC)
 * If you intend to add a degree of IE <10 support, you can follow the instructions here, though the Microsoft .NET system described therein is not too flexible. 22:09, January 1, 2012 (UTC)