Wikia

Community Central

Admin Forum:Gradient effect

18,694pages on
this wiki
Talk0

This Forum has been archived

Forums: Admin Central Index Technical Help Gradient effect
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 1296 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.


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. ― Thailog 10:27, December 26, 2011 (UTC)

That's close, but not quite there. You need to set a background-image (or shorthand background) property instead of background-color. background-color 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 wikia-button class. Sovq 10:47, December 26, 2011 (UTC)
Thank you! ― Thailog 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. TK999 22:09, January 1, 2012 (UTC)

Around Wikia's network

Random Wiki