Template:Lgradient: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
background-image:-webkit-linear-gradient({{{1}}}}); background:-moz-linear-gradient({{{1}}}}); background-image:-ms-linear-gradient({{{1}}}}); background-image:     -o-linear-gradient({{{1}}}}); background-image: linear-gradient({{{1}}}});
<includeonly>background-image: -moz-linear-gradient({{{1}}},{{{2}}}); background-image: -webkit-linear-gradient({{{1}}},{{{2}}}); background-image: -o-linear-gradient({{{1}}},{{{2}}}); background-image: -ms-linear-gradient({{{1}}},{{{2}}}); background-image: linear-gradient({{{1}}},{{{2}}});</includeonly><noinclude>
 
=Usage=
The template works by using two variables the first indicates the direction of the gradient top, left, right or bottom and the second specifies the colors.
 
<code><nowiki>{{Lgradient| direction |color 0%, intermediate colors, color 100%}} </nowiki></code>
 
Only the first and last colors need to be specified but any other colors can be added in between with a percent to indicate when they stop. The template works on FireFox and Chrome 10+ and should work on Saf5.1+, IE10, Opera 11.10+ although I haven't tested it in those browsers I got some of the code used off a reputable site that hasn't been wrong yet.
 
=Examples=
<nowiki><div style="{{Lgradient|top|#000000,#F7F2E6}} padding:40px">
</div></nowiki>
 
<div style="{{Lgradient|top|#000000,#F7F2E6}} padding:40px">
</div>
 
 
 
 
<nowiki><span style="{{Lgradient|top|#000000,#F7F2E6}} padding:40px"> Lots of text text text
</span></nowiki> '''Watch when using <nowiki><span></nowiki> tags because the background will cover up elements too close to it.
 
Like it did here
 
<span style="{{Lgradient|top|#000000,#F7F2E6}} padding:16px;">Lots of text text text</span>
 
 
 
<nowiki><div style="{{Lgradient|left|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:40px">
</div></nowiki>
 
 
<div style="{{Lgradient|left|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:40px">
</div>
 
 
<nowiki><div style="{{Lgradient|left top|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:100px">
</div></nowiki>  '''This one needs more space to be noticable than the standard width I've been using.'''
 
<div style="{{Lgradient|left top|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:200px">
</div>
[[Category:Utility Templates]]

Latest revision as of 02:40, 29 June 2011


Usage

The template works by using two variables the first indicates the direction of the gradient top, left, right or bottom and the second specifies the colors.

{{Lgradient| direction |color 0%, intermediate colors, color 100%}}

Only the first and last colors need to be specified but any other colors can be added in between with a percent to indicate when they stop. The template works on FireFox and Chrome 10+ and should work on Saf5.1+, IE10, Opera 11.10+ although I haven't tested it in those browsers I got some of the code used off a reputable site that hasn't been wrong yet.

Examples

<div style="{{Lgradient|top|#000000,#F7F2E6}} padding:40px"> </div>



<span style="{{Lgradient|top|#000000,#F7F2E6}} padding:40px"> Lots of text text text </span> Watch when using <span> tags because the background will cover up elements too close to it.

Like it did here

Lots of text text text


<div style="{{Lgradient|left|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:40px"> </div>



<div style="{{Lgradient|left top|#000000,#FFCC00 25%,#0000FF 50%,#CC0000 75%, #000000}} padding:100px"> </div> This one needs more space to be noticable than the standard width I've been using.