RCSS FontEffects - Revision history

MjnMixael: Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/RCSS-FontEffects}}"

2026-10-28T18:34:53Z

Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/RCSS-FontEffects}}"

← Older revision		Revision as of 18:34, 28 October 2026
Line 1:		Line 1:
	{{~~RCSS}}~~		{{SCPUI moved\|https://github.com/MjnMixael/SCPUI/wiki/RCSS-FontEffects}}
	Font effects are an extension to CSS for RCSS for applying effects, such as outlining or shadowing, to text. Similarly to decorators, font effects are declared and named in a style sheet like a property, and configured with font-effect-specific properties. Custom font effects can be developed to apply arbitrary effects onto text.

	~~==Properties==~~
	Font effects are declared and configured within style sheets in exactly the same manner as decorators, except they are declared as <name>-font-effect rather that <name>-decorator, including the z-index property to resolve an ambiguous render order. The only exceptions are noted below:

	~~===Color===~~
	~~All font effects have a <name>-color property which is applied multiplicatively over the entire effect~~.

	~~===Inheritance===~~
	~~Unlike decorators, font effects are inherited from parent elements. For example, the following declaration:~~
	~~<pre>~~
	h1
	{
	~~header-font~~-~~effect: outline;~~
	~~header-width: 2px;~~
	~~header-color: black;~~
	}
	~~</pre>~~
	will add an outline effect on the text within all h1 elements and their descendants. To prevent inheritance, override the effect with none. For example, to prevent the h1 outline effect from affecting span elements, you could specify the following:
	~~<pre>~~
	~~h1 span~~
	{
	~~header-font-effect: none;~~
	}
	~~</pre>~~
	~~==Effects==~~
	~~libRocket comes with two built-in font effects:~~

	*shadow effect, for rendering shadows.
	*outline effect, for outlining text.

MjnMixael: Created page with "{{RCSS}} Font effects are an extension to CSS for RCSS for applying effects, such as outlining or shadowing, to text. Similarly to decorators, font effects are declared and na..."

2023-04-22T18:23:45Z

Created page with "{{RCSS}} Font effects are an extension to CSS for RCSS for applying effects, such as outlining or shadowing, to text. Similarly to decorators, font effects are declared and na..."

New page

{{RCSS}}
Font effects are an extension to CSS for RCSS for applying effects, such as outlining or shadowing, to text. Similarly to decorators, font effects are declared and named in a style sheet like a property, and configured with font-effect-specific properties. Custom font effects can be developed to apply arbitrary effects onto text.

==Properties==
Font effects are declared and configured within style sheets in exactly the same manner as decorators, except they are declared as <name>-font-effect rather that <name>-decorator, including the z-index property to resolve an ambiguous render order. The only exceptions are noted below:

===Color===
All font effects have a <name>-color property which is applied multiplicatively over the entire effect.

===Inheritance===
Unlike decorators, font effects are inherited from parent elements. For example, the following declaration:
<pre>
h1
{
header-font-effect: outline;
header-width: 2px;
header-color: black;
}
</pre>
will add an outline effect on the text within all h1 elements and their descendants. To prevent inheritance, override the effect with none. For example, to prevent the h1 outline effect from affecting span elements, you could specify the following:
<pre>
h1 span
{
header-font-effect: none;
}
</pre>
==Effects==
libRocket comes with two built-in font effects:

*shadow effect, for rendering shadows.
*outline effect, for outlining text.