FANDOM


(Created page with "It is a linear-gradient. Using an image for this is not a very good approach, since all browsers support this. Taken from w:c:orcsmustdie: <source lang="css"> .infohead { ...")
 
Line 4: Line 4:
 
.infohead {
 
.infohead {
 
background-color:#390200;
 
background-color:#390200;
background-image: -moz-linear-gradient(center top , #6c0400 0%, #390200 100%);
 
 
background-image: linear-gradient(center top , #6c0400 0%, #390200 100%);
 
background-image: linear-gradient(center top , #6c0400 0%, #390200 100%);
  +
background-image: -moz-linear-gradient(center top , #6c0400 0%, #390200 100%);
 
background-image: -o-linear-gradient(center top , #6c0400 0%, #390200 100%);
 
background-image: -o-linear-gradient(center top , #6c0400 0%, #390200 100%);
 
background-image: -webkit-linear-gradient(center top , #6c0400 0%, #390200 100%);
 
background-image: -webkit-linear-gradient(center top , #6c0400 0%, #390200 100%);
Line 17: Line 17:
 
</source>
 
</source>
 
You can see the full pages at [[w:c:orcsmustdie:MediaWiki:Common.css]] and [[w:c:tes:MediaWiki:Common.css/infobox.css]].
 
You can see the full pages at [[w:c:orcsmustdie:MediaWiki:Common.css]] and [[w:c:tes:MediaWiki:Common.css/infobox.css]].
  +
  +
For the full explanation read linear-gradient on [https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient MDN].

Revision as of 15:11, March 6, 2014

It is a linear-gradient. Using an image for this is not a very good approach, since all browsers support this. Taken from w:c:orcsmustdie:

.infohead {
    background-color:#390200;
    background-image: linear-gradient(center top , #6c0400 0%, #390200 100%);
    background-image: -moz-linear-gradient(center top , #6c0400 0%, #390200 100%);
    background-image: -o-linear-gradient(center top , #6c0400 0%, #390200 100%);
    background-image: -webkit-linear-gradient(center top , #6c0400 0%, #390200 100%);
    background-image: -ms-linear-gradient(center top , #6c0400 0%, #390200 100%);
    background-image: -khtml-linear-gradient(center top , #6c0400 0%, #390200 100%);
}

If you have many different header colours like used over at w:c:tes, you can make use of transparency in the gradient. This gives a nice shading effect that works on nearly every colour you use:

background-image: linear-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.0) 100%);

You can see the full pages at w:c:orcsmustdie:MediaWiki:Common.css and w:c:tes:MediaWiki:Common.css/infobox.css.

For the full explanation read linear-gradient on MDN.

Community content is available under CC-BY-SA unless otherwise noted.