Template:Linear gradient text

From GodWiki
Jump to: navigation, search
📚 Documentation
Important.png

Warning: This template uses features not supported in all browsers. Use with caution.

Almost all modern browsers will behave as expected, with the notable exception of Internet Explorer (yes, I know, but it needs to be said). Check this table for up-to-date cross-browser compatibility.

The {{Linear gradient text}} template uses experimental browser features to apply a gradient to an area of text. It has limits, and should be used with caution. Please be aware that colouring text can have a huge impact on accessibility to vision-impaired people, and on small displays.

Usage

Use within a CSS style tag. The template uses the background-image property.

<div style="{{linear-gradient | [start position] | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>
  1. start position – Optional. Specify a start point: left, top, right or bottom, or a combination of two of each, e.g. top left. This provides eight starting points. This property can also be set at a specific angle: 135deg, 45deg, where 0deg corresponds to bottom and 90deg corresponds to left. If you do not specify a start position, the gradient will start at the top.
  2. color – The first two colors are required. You can define any number of additional colors, separated with commas.
  3. stop – Optional. You can specify a stop position for each color using a percentage (e.g. 45%) or pixels (e.g. 60px).

Important notes:

  • This template creates the gradient effect by using the background layer behind the text. Therefore, any element with this template cannot also have a different background. Set the background in a container element if required.
  • It may be wise to set a color: color to have a predictable text color in non-supported browsers.

Examples

<div style="color: brown; {{linear gradient text|top|black, maroon}};">Lorem ipsum...</div>
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.
<div style="background-color: MidnightBlue;"><div style="color: white; {{linear gradient text|left|white, #cccccc 30%, #cccccc 60%, white}}">{{:Lorem Ipsum}}</div></div>
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.