Template:Linear-gradient

From GodWiki
Jump to: navigation, search
[view] [edit] [history] [refresh]
📚 Documentation

This template creates a gradient background. This currently works in all major browsers, but not all browsers understand every possible feature: see this chart for full feature compatibility.

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).

Examples

<div style="{{linear-gradient|left|#ffdddd, #ddddff}}">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="{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">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="{{linear-gradient|#ffdddd, #ddddff}}">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.

Considerations

Badly chosen colors can have a big impact on accessibility for vision impaired users. The above examples use contrasting colors to show the effect more clearly. It is best to use subtle differences in color to enhance the appearance, rather than radically change it. This also minimizes the effects between browsers that do and do not support gradients.