Difference between revisions of "Template:Gradient Text"

From Moegirlpedia
Jump to: navigation, search
 
(2 intermediate revisions by 2 users not shown)
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>
 
<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|
+
{{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>
 
[[Category:Formatting templates]]</noinclude>

Latest revision as of 12:32, 20 October 2024

Template-info.svg Template Documentation  [View] [Edit] [History] [Refresh]
This document is transcluded from Template:Gradient Text/doc.

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

background-clip MDN

Example

Rainbow colored text Soft gradient text

Horizontal gradient

Usage

{{Gradient_Text|gradient color code|text|title=The comment that pops up when hovering over the text}}

Gradient color code

<position>, <color1>, <color2>, ...


View · Talk · Edit
Formatting templates
Element settings
Element float
Float {{Float}} • Clear float {{Clear}} • Change float direction {{Clear2}} • Stacks {{Stack}}{{Stack begin}}{{Stack end}} • Flex {{flex}}
Columns
Inline {{Columns-list}} • Multi-columns {{Multicol}}{{Multicol-break}}{{Multicol-end}}
Align
{{Bottom}} • {{Center}}
Special characters
Concatenator{{Wj}}/&#x2060; • Zero-width space{{Zwsp}}/&#x200B; • Non-breaking space{{Nbsp}}/&nbsp;
Tables
Writing mode
Writing mode{{Writing-mode}} • Vertical text{{VText}} • Vertical page{{Tategaki}} • Mirrorized text{{MirrorText}}
Hover effect
{{Moe-hover}} • {{Hover}} • {{HoverInline}} • {{Hovers}} • {{TextHover}} • {{PicHover}}
Colors
Text color
Standard {{Color}} • Colored links {{Coloredlink}} • Color Ops {{ColorOps}} • Colored Japanese text {{Cj}}
Background color
Text and background color
Cross-color
{{Crosscolor}} • {{CrosscolorF}} • {{CrosscolorEyecare}} • {{Rainbow}}
Shadow
Linear-gradient styles
Color boxes
Formatting
Font
Emoji{{Emojifont}}
Text style
Fully functional {{Font}} • Outlines {{Border}}{{TextBox}} • Preformatted text {{Pre}}{{Code}} • Emphasis{{Text-emphasis}} • Upline{{Upline}} • Text outline {{text outline}} • Text outline 2 {{text outline 2}}
False
{{False block}} • {{False link}} • {{False hide}} • {{False link}}
Format
Invisible 0{{0}} • Crosstext{{Crosstext}} • Spaces/Repeat text{{Space}} • Padding{{Pad}} • Rounding{{Strformat}}
Memes
Blocked text {{Spoiler}} • Gray striked text {{jk}} • Blurred text{{Text blur}}
Phonetics
Ruby series
Standard {{Ruby}} • Shadow {{Rubyh}} • Simplified ruby{{Ruby+}} • Multi-line {{Ruby-begin}}{{Ruby-item}}{{Ruby-text-container}}{{Ruby-end}} • Separate characters {{Rubya}} • Ruby tag{{RawRuby}}
Others
Phonetic translation {{Photrans}} • Multi-phonetic translation {{Photrans2}} • Phonetic translation switch{{Photransa}} • Japanese name {{nihongo}}
Other
Formatter
Disambiguation {{Dis}}{{Dl}} • {{VA-CharaList}} • {{QuestionBox}} • {{UnicodeTable}}
Links and categories
Categorization {{Cate}}{{Moe points}} • Category name {{Catn}} • Interlanguage link {{Enlink}} • ISBN link {{ISBN}} • Hide redlink {{Link}} • Plain link {{Plain link}} • Black link {{Blnk}} • Colored link {{Coloredlink}} • Link language identifier {{Languageicon}}
Navboxes
Navboxes {{Navbox}}{{Navbox subgroup}}{{Navbox with columns}}{{Navbox with collapsible groups}}{{Navbar}} • Simple Daikazoku templates {{Daikazoku}}{{Daikazoku child}}{{Daikazoku row}}{{Linksplit}} • Horizontal list {{Hlist}}
Notation
Citation needed {{Citation needed}} • Deceased people {{Dead}}{{Dead-nolink}} • SupTemplate {{Supt}} • Game rating {{Game rating}} • CADPA Game rating {{CADPA rating}} • Quotes {{Cquote}}{{Quote frame}} • Notes {{Ps}}
Retrieved from "https://en.moegirl.org.cn/index.php?title=Template:Gradient_Text&oldid=42289"