Fandom

Community Central

Admin Forum:Gradient effect

19,023pages on
this wiki
Add New Page
Talk0 Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

This Forum has been archived

Forums: Admin Central Index Technical Help Gradient effect
Central'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 1361 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)

Also on Fandom

Random Wiki