Blur effect via CSS3 text-shadow property. Equivalent to templates such as {{Blur}}, {{BlackMist}}.
(ｉ)Compatibility issue It is known that the blur can not be scratched on iOS, iPadOS and macOS Safari, but the pointer hover mode is normal, if you need to solve it, see #Apple blur-scratching temporary measure.
Parameters
All parameters except the numeric parameter 1 are optional.
- Numerical parameter
1: the text content to be blurred. - Numeric parameter
2: what to display when the pointer hovers over the text (not mobile friendly). The default isYou've known too much. - Parameters
sdcolor: the color used for blurred text. Defaults togrey. - Parameter
sdsize: blur distance, the larger the value, the more blurry. Defaults to10px. - Parameters
css: Customize other CSS styles. - Parameter
hover: When it istrue, the hover mode is enabled. When the mouse is placed on the text, the blur can be gradually removed, and the blur will be restored when the mouse is removed. Thesdsizeparameter is invalid in hover mode. - Numeric parameter
time: when hover istrue, set the duration of the gradient animation. In seconds, the default is 0.75 seconds.
Example usage
- Pointer hover mode. Due to the aforementioned compatibility issues, it is recommended to give priority to adding the
hover=trueparameter.
{{text blur|If you take off the glasses and this is the effect, then congratulations: you have built-in 5 pixel Gaussian blur|hover=true}}
If you take off the glasses and this is the effect, then congratulations: you already have a 5-pixel Gaussian blur
- Normal usage.
{{Text blur|The culprit is him↗|Fake, oh my eyes are heavy with karma}}
The culprit is him↗
- Specify text color and blur level.
{{Blurred text|New version of Scratch|sdcolor=#7BCC83|sdsize=3px}}
New version of Scratch
- Currently, it is not possible to directly add a link to the template (Moegirlpe-tan). Please use with {{coloredlink}}. (Blue chain is
#0645AD, red chain is#BA0000)
{{Text blur|{{coloredlink|rgba(0,0,0,0)|Moegirlpe-tan}}|sdcolor=#0645AD}}
Moegirlpe-tan
Apple blur-scratching temporary measure
Optionally add to your personal JS if needed:
if ( /Macintosh|iPhone|iPad/.test(navigator.userAgent) ) {
mw.loader.addStyleTag('.wenzimohu, .wenzimohu * { transition-duration: 0.75s; }');
mw.hook('wikipage.content').add(function ($content) {
$content.find(".wenzimohu , .wenzimohu *").filter(function () {
return $(this).css("color") == "rgba(0, 0, 0, 0)";
}).hover(function () {
$(this).css( "color", ($(this).css("text-shadow").match(/rgb\(.*?\)/) || ["inherit"])[0]);
}, function () {
$(this).css("color", "rgba(0, 0, 0, 0)");
});
});
}
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||