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 similar to how decorators are declared.

font-effect

<type> is a font effect type, and <properties> specify the properties of the given decorator type.

Multiple font effects can also be specified, eg.

font-effect: <type>( <properties> ), <type>( <properties> ), ... ;

Multiple font effects are applied in reverse order.

Note that there is no RCSS at-rule for font effects as there is for decorators. Thus, the font-effect property cannot take a name.

Inheritance

Unlike decorators, font effects are inherited from parent elements. For example, the following declaration:

h1
{
	font-effect: outline(2px black);
}

will add an outline to 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:

h1 span
{
	font-effect: none;
}

Effects

RmlUi comes with the following built-in font effects:

1. glow effect, for glowing text.
2. outline effect, for outlining text.
3. shadow effect, for rendering shadows.
4. blur effect, for blurring text.