Difference between revisions of "Template:Gradient Text"
m (Added to Category:Formatting templates) |
|||
| Line 1: | Line 1: | ||
| − | <includeonly><span title="{{{title|}}}" style="background:-webkit-linear-gradient({{{1}}});-webkit-background-clip:text;<!--background:linear-gradient({{{1}}});-->background-clip:text;"><span style="-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></span></includeonly><noinclude>[[Category:Formatting templates]]</noinclude> | + | <includeonly><span title="{{{title|}}}" style="background:-webkit-linear-gradient({{{1}}});-webkit-background-clip:text;<!--background:linear-gradient({{{1}}});-->background-clip:text;"><span style="-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></span></includeonly><noinclude> |
| + | {{doc| | ||
| + | content= | ||
| + | |||
| + | == Introduction == | ||
| + | |||
| + | This is a '''gradient color text''' template. Real gradient text using the CSS <code>background-clip:text</code> property. Instead of the original gradient effect simulated by one text and one color. <!-- background-clip is a CSS3-defined property, but text is not a CSS3-allowed property value, nor is it the original intent of this property. "Unfortunately" background-clip:text (with the prefixed version -webkit-background-clip:text ) is currently widely supported by major browsers. --> | ||
| + | |||
| + | Because in the current browsers, only the Edge and Webkit kernels (Chrome, Safari, Android's own browsers, and extremely fast kernels of domestic dual-core browsers) with the <code>background-clip:text</code> attribute implemented can parse and display the effect. The display effect below IE and Firefox 49 is restored to the original black text (Firefox 48 can open <code>about:config</code>, put <code>layout.css.background-clip-text.enabled</code> and <code>layout.css.prefixes.webkit</code> to <code>true</code> to see the effect). | ||
| + | |||
| + | Reference: [https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip background-clip | MDN] | ||
| + | |||
| + | <noinclude>[[Category:Template documentation]]</noinclude> | ||
| + | [[Category:Formatting templates]]</noinclude> | ||
Revision as of 16:18, 25 July 2022
{{doc| content=
Introduction
This is a gradient color text template. Real gradient text using the CSS background-clip:text property. Instead of the original gradient effect simulated by one text and one color.
Because in the current browsers, only the Edge and Webkit kernels (Chrome, Safari, Android's own browsers, and extremely fast kernels of domestic dual-core browsers) with the background-clip:text attribute implemented can parse and display the effect. The display effect below IE and Firefox 49 is restored to the original black text (Firefox 48 can open about:config, put layout.css.background-clip-text.enabled and layout.css.prefixes.webkit to true to see the effect).
Reference: background-clip | MDN
