Template:Gradient: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
mNo edit summary
(+doctable(~example))
Line 1: Line 1:
{{#if:{{{h|}}}|background-image:-ms-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-moz-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-o-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-webkit-gradient(linear,left top,right top,color-stop({{{3|0}}},{{{1|#FFFFFF}}}),color-stop({{{4|1}}},{{{2|#DCDCDC}}}));background-image:-webkit-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}})|background:-ms-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-moz-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-o-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-webkit-gradient(linear,left top,left bottom,color-stop({{{3|0}}},{{{1|#FFFFFF}}}),color-stop({{{4|1}}},{{{2|#DCDCDC}}}));background:-webkit-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}})}}<noinclude>
{{#if:{{{h|}}}|background-image:-ms-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-moz-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-o-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:-webkit-gradient(linear,left top,right top,color-stop({{{3|0}}},{{{1|#FFFFFF}}}),color-stop({{{4|1}}},{{{2|#DCDCDC}}}));background-image:-webkit-linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background-image:linear-gradient(left,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}})|background:-ms-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-moz-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-o-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:-webkit-gradient(linear,left top,left bottom,color-stop({{{3|0}}},{{{1|#FFFFFF}}}),color-stop({{{4|1}}},{{{2|#DCDCDC}}}));background:-webkit-linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}});background:linear-gradient(top,{{{1|#FFFFFF}}} {{#if:{{{3|}}}|{{#expr:{{{3|0}}}*100}}%}},{{{2|#DCDCDC}}} {{#if:{{{4|}}}|{{#expr:{{{4|1}}}*100}}%}})}}<noinclude>
----
{|border=1 style=border-collapse:collapse cellpadding=3
Add "<code>|h=1</code>" to make horizontal gradient.</noinclude>
!Code
!Result
!Example
|-
|1=#RRGGBB
|First color-stop.
|1=#00FF00
|-
|2=#RRGGBB
|Second color-stop.
|2=#8CA1FF
|-
|3=0.0-1.0
|(optional) First color-stop's start point.
|3=0.35
|-
|4=0.0-1.0
|(optional) Second color-stop's start point.
|4=0.8
|-
|h=1
|(optional) Defines horizantal gradient.
|h=1
|-
|colspan=3 style="{{gradient|#00FF00|#8CA1FF|0.35|0.8|h=1}};height:19px"|
|}</noinclude>

Revision as of 10:18, July 23, 2011

background:-ms-linear-gradient(top,#FFFFFF ,#DCDCDC );background:-moz-linear-gradient(top,#FFFFFF ,#DCDCDC );background:-o-linear-gradient(top,#FFFFFF ,#DCDCDC );background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFFFFF),color-stop(1,#DCDCDC));background:-webkit-linear-gradient(top,#FFFFFF ,#DCDCDC );background:linear-gradient(top,#FFFFFF ,#DCDCDC )

Code Result Example
1=#RRGGBB First color-stop. 1=#00FF00
2=#RRGGBB Second color-stop. 2=#8CA1FF
3=0.0-1.0 (optional) First color-stop's start point. 3=0.35
4=0.0-1.0 (optional) Second color-stop's start point. 4=0.8
h=1 (optional) Defines horizantal gradient. h=1