Tiled Box decorator
The tiled-box
decorator can render nine sprites or images across an element. One image is placed at a fixed size in each of the element’s corners, one image is stretched along each edge, and a final image is stretched in both directions to cover the center region of the image.
The decorator renders across the padded area of its element.
decorator: tiled-horizontal(
<top-left-image-src> <top-left-image-orientation>,
<top-image-src> <top-image-orientation>,
<top-right-image-src> <top-right-image-orientation>,
<left-image-src> <left-image-orientation>,
<center-image-src> <center-image-orientation>,
<right-image-src> <right-image-orientation>,
<bottom-left-image-src> <bottom-left-image-orientation>,
<bottom-image-src> <bottom-image-orientation>,
<bottom-right-image-src> <bottom-right-image-orientation>
);
The <x-orientation>
properties can be omitted, which leaves them at their default values.
Properties
*x*-image-src
Value: | <string> |
Initial: | empty |
Percentages: | N/A |
This property defines either a sprite name or a relative path to an image file.
*x*-image-orientation
Value: | none | flip-horizontal | flip-vertical | rotate-180 |
Initial: | none |
Percentages: | N/A |
Flips or rotates the image.