FANDOM


 
Line 1: Line 1:
It is a linear-gradient. Using an image for this is not a very good approach, since all browsers support this.
+
It is a linear-gradient. Using an image for this is not a very good approach. Since all browsers now support gradients, images are no longer required nor desired.
Taken from [[w:c:orcsmustdie]]:
+
Taken from [[w:c:orcsmustdie]]
 
<source lang="css">
 
<source lang="css">
 
.infohead {
 
.infohead {

Latest revision as of 15:14, March 6, 2014

It is a linear-gradient. Using an image for this is not a very good approach. Since all browsers now support gradients, images are no longer required nor desired. 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.