Template:Linear-gradient

Template documentation

This documentation is transcluded from Template:Linear-gradient/doc. (Edit | history)
Note to editors: Please don't categorize this template by editing it directly. Instead, place the category in its documentation page, in its "includeonly" section.

Adapted from http://www.mediawiki.org/wiki/Template:Linear-gradient

This template creates a simple gradient background. This currently works in Firefox (3.6 and up), Opera (11.10 and up), Safari (5.1 and up), Google Chrome (10 and up) and Internet Explorer 10. Uses fallback-color for earlier browser versions.

Usage

Use within the value of the style="" attribute of an HML element (or attribute of wikitable elements), where you set one or more CSS style properties. This template generates background: CSS properties.

<div style="{{Linear-gradient|start-position|start-color|stop-color}}">Lorem ipsum...</div>

• start-position – Mandatory. Specifies a starting point: left, top, right or bottom, or a combination of two of each, e.g. top left. This provides eight starting points. The final point is the opposite one and this parameter determines the direction of the generated gradient.
• start-color and stop-color – Mandatory. Specifies the two background colors from which the linear gradient will be generated in the previous direction: you can use # followed by an hexadecimal rgb specifier (3-digit or 6-digit), or rgb(r,g,b) (with r, g, b set to decimal integers in 0..255), or rgba(r,g,b,a) (with a set to a decimal floatting-point number in 0..1), or standard HTML color names, or transparent.

Technical notes

The template assign the stop-color as a default plain background color (fallback for older browsers that do not support gradients). If the plain background color is undesired because it will overlay some contents behind it, make sure you set the stop-color as transparent. Both the start-color and stop-color must then be contrasting (or transparent) with the text color (that you should also specify explicitly) if you insert any text in the element where you set a linear gradient, otherwise the inner text may not be readable.

This template uses the new CSS property values for backgrounds using linear gradients:

• background: -webkit-gradient(linear,...) (legacy property with a deviating parameter format, initially used in earlier Safari versions before 5.1 and earlier Google Chrome versions before 10, which requires to use explicitly the two horizontal and vertical positions, and uses another syntax for embedding the two stop positions and colors; this template however generates the correct syntax for these legacy browsers),
• background: -webkit-linear-gradient(...) (for Chrome 10+ or Safari 5.1+),
• background: -moz-linear-gradient(...) (for Firefox 3.6+),
• background: -o-linear-gradient(...) (for Opera 11.10+),
• background: -ms-linear-gradient(...) (for IE 10+), and
• background: linear-gradient(...) (for the W3C CSS3 standard, but still not recognized by the browsers above).

Note: The legacy non-standard CSS property filter: progid:DXImageTransform.Microsoft.gradient(...) (only used in old versions of IE) is not generated as it is insecure and not permitted in styles for this wiki (it would invalidate the whole style="" HTML attribute value if you use filter: in it).

Examples

<div style="margin: auto; {{Linear-gradient|left top|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|top|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|right top|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|left|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|right|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|left bottom|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|bottom|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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="margin: auto; {{Linear-gradient|right bottom|blue|white}}; color: black; padding: 0 0.25em; max-width: 19em; font-family: serif>''Lorem ipsum...''</div> will produce: Lorem ipsum dolor sit amet, consectetur adipisicing 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

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.