Difference between revisions of "Template:Linear-gradient"
(Created page with "<includeonly><div style="background-image: -moz-linear-gradient({{{1|}}}, {{{2|}}}); background-image: -o-linear-gradient({{{1|}}}, {{{2|}}}); background-image: -webkit-linear...") |
m (Changed to Category:Formatting templates) |
||
| Line 14: | Line 14: | ||
| #default = {{{1}}} | | #default = {{{1}}} | ||
}}, {{{2|}}});">{{{info|}}}</div></includeonly><noinclude> | }}, {{{2|}}});">{{{info|}}}</div></includeonly><noinclude> | ||
| − | {{documentation}}[[Category: | + | {{documentation}}[[Category:Formatting templates]]</noinclude> |
Latest revision as of 13:08, 30 January 2021
Template DocumentationTakes contents from the same template on Wikipedia, [1], with some modifications.
A support template for Linear-gradient, to design text backgrounds with gradient colors. Usable on Firefox 3.6, Opera 11.10, Safari 5.1, Google Chrome 10, Internet Explorer 10 and newer versions.
Usage
{{linear-gradient|Direction of gradient|Color [stop],Color [stop],Color [stop]…|info= Nostalgia}}
- Parameters
- There are 8 gradient directions
- top (top-to-bottom)
- bottom (vice versa)
- left (left-to-right)
- right (v. v.)
- top left / left top (top left-to-bottom right)
- top right / right top (v. v.)
- bottom left / left bottom
- bottom right / right bottom
- Colors are separated with a comma (,), and a minimum of 2 must be entered, otherwise it won't work.
- stop is optional, to define the position at which the color stops, in percentage
- info= is the content of the text
- There are 8 gradient directions
Examples
Normal use
{{linear-gradient|left|#ffdddd, #ddddff|info=Text}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff|info=Text}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{linear-gradient|top|#ffdddd, #ddddff|info=Text}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lyrics
{{linear-gradient|bottom right|#ffdddd, #ddddff|info=T<br/>e<br/>x<br/>t}}
{{linear-gradient|bottom right|#ffdddd, #ddddff|info=Verse 1<br/>Verse 2<br/>Verse 3<br/>Verse 4}}
Verse 1
Verse 2
Verse 3
Verse 4
Verse 2
Verse 3
Verse 4
Multiple colors
{{linear-gradient|bottom|red, orange, yellow, green, blue|info=This is rainbow!}}
This is rainbow!
Width limit
<div style="width: 200px;>{{linear-gradient|left|red, orange, yellow, green, blue|info=This is rainbow!}}</div>
This is rainbow!
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
