Template:Text blur/doc

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 is You've known too much.
• Parameters sdcolor: the color used for blurred text. Defaults to grey.
• Parameter sdsize: blur distance, the larger the value, the more blurry. Defaults to 10px.
• Parameters css: Customize other CSS styles.
• Parameter hover: When it is true, 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. The sdsize parameter is invalid in hover mode.
• Numeric parameter time: when hover is true, 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=true parameter.

{{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)");
		});
	});
}