RmlUi 😍
Have fun fiddling about in this demo.
Press 'F8' to open up the debugger.
🎉
Gradient decorator
The 'gradient' decorator renders a color gradient in the vertical or horizontal direction.
Image decorator
The 'image' decorator applies an image to the background of an element. By default it stretches the image to the size of the element, but this behavior can be controlled as seen later on.
Tiled-horizontal decorator
The 'tiled-horizontal' decorator separates an image into three parts, with the edges displayed at their native size while the middle part is stretched to cover the remaining width of the element. In each of the following examples an image is displayed at its native size first, and then the decorator is applied to it with its element stretched horizontally.
In the third example we show the same title bar used to style the sample windows.
Tiled-vertical decorator
The 'tiled-vertical' decorator behaves like tiled-horizontal, but this time it is stretched vertically.
Clearly, not all images are designed to stretch like this. However, one can certainly envision a usage for the first two examples.
Tiled-box decorator
The 'tiled-box' decorator lays out a 3x3 grid within the element, each of the nine parts being filled with a separate sprite or image. The corners stay fixed in size, while the center and edges are stretched to fill the remaining size of the element.
The following image displays the region used to define the background of the window in this sample.
The decorator's element can then gracefully be sized in any direction, keeping the corners and edges at a proper size.
Ninepatch decorator
The 'ninepatch' decorator is similar to the tiled-box decorator in that it splits the image into nine parts. However, only two sprites are used to define all nine tiles, an outer sprite and an inner sprite.
Let us define the outer sprite by the following image, and the inner sprite as the part within the displayed border.
When the ninepatch decorator is applied and the element is stretched, the following is rendered.
Notice that the corners stay fixed, and the inner sprite is stretched. We can also control the rendered size of the edges, here the left edge is displayed at its native size and the others at half their size.
If we instead compare this to the image decorator, we see the following.
With the image decorator it looks blurry and its borders are stretched.
Image decorator fit modes
fill
contain
cover
scale-none
scale-down
repeat
repeat-x
repeat-y
Image decorator alignment modes
default
right
left bottom
70% 30%
100px -15px
Using fit mode 'scale-none'.
Tiled decorators orientation
Orientation can be applied to every tile individually in the 'image', 'tiled-horizontal', 'tiled-vertical', and 'tiled-box' decorators.
default
flip-vertical
flip-horizontal
rotate-180
Image elements
The 'img' elements are separate from decorators, but we describe them here for completeness. They can be declared as in html. Additionally, a 'rect' attribute can be used to crop the image. The element can also display sprites declared in a sprite sheet.
Sprite sheets
Sprite sheets are defined by an image source and a collection of sprites, and can be declared in RCSS. Sprites are essentially rectangles into the given image. For example, the following image
is used to render most sprites in this demo. Sprites can be used in decorators and image elements as if they were separate images.
None
Glow
Outline
Shadow
Blur
Transitions
Hover over the following to see an animation performed by the transition property in RCSS.
Tweening functions
Set animation parameters below and click on the background or the flag.
Cube
The cube is transformed and animated entirely in RCSS using the @keyframes at-rule.