-
Notifications
You must be signed in to change notification settings - Fork 126
RCSS: Decorators: Tiled box
The 'tiled-box' decorator can render nine images, or subsections of images, across an element. One image is placed in each of the element's corners, one each stretched or tiled along the edges, and another stretched across the middle.
top-left-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
top-left-image-s-begin, top-left-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
top-left-image-s-end, top-left-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the top-left corner image. They behave similarly to the properties in the 'image' decorator.
top-right-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
top-right-image-s-begin, top-right-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
top-right-image-s-end, top-right-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the top-right corner image. They behave similarly to the properties in the 'image' decorator.
bottom-left-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
bottom-left-image-s-begin, bottom-left-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
bottom-left-image-s-end, bottom-left-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the bottom-left corner image. They behave similarly to the properties in the 'image' decorator.
bottom-right-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
bottom-right-image-s-begin, bottom-right-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
bottom-right-image-s-end, bottom-right-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the bottom-right corner image. They and behave similarly to the properties in the 'image' decorator.
top-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
top-image-repeat
| Property | Comment |
|---|---|
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
top-image-s-begin, top-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
top-image-s-end, top-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the top edge image. They behave similarly to the centre properties in the 'horizontal-tiled' decorator.
right-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
right-image-repeat
| Property | Comment |
|---|---|
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
right-image-s-begin, right-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
right-image-s-end, right-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the right edge image. They behave similarly to the centre properties in the 'vertical-tiled' decorator.
bottom-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
bottom-image-repeat
| Property | Comment |
|---|---|
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
bottom-image-s-begin, bottom-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
bottom-image-s-end, bottom-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the bottom edge image. They behave similarly to the centre properties in the 'horizontal-tiled' decorator.
left-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
left-image-repeat
| Property | Comment |
|---|---|
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
left-image-s-begin, left-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
left-image-s-end, left-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the left edge image. They behave similarly to the centre properties in the 'vertical-tiled' decorator.
center-image-src
| Property | Comment |
|---|---|
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
center-image-repeat
| Property | Comment |
|---|---|
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
center-image-s-begin, center-image-t-begin
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
center-image-s-end, center-image-t-end
| Property | Comment |
|---|---|
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
These properties specify the center image. They behave similarly to the centre properties in the 'tiled-horizontal' decorator.
top-left-image-s
Shorthand for setting top-left-image-s-begin and top-left-image-s-end.
top-left-image-t
Shorthand for setting top-left-image-t-begin and top-left-image-t-end.
top-left-image
A shorthand property for setting top-left-image-src, top-left-image-s-begin, top-left-image-t-begin, top-left-image-s-end and top-left-image-t-end.
top-right-image-s
Shorthand for setting top-right-image-s-begin and top-right-image-s-end.
top-right-image-t
Shorthand for setting top-right-image-t-begin and top-right-image-t-end.
top-right-image
A shorthand property for setting top-right-image-src, top-right-image-s-begin, top-right-image-t-begin, top-right-image-s-end and top-right-image-t-end.
bottom-left-image-s
Shorthand for setting bottom-left-image-s-begin and bottom-left-image-s-end.
bottom-left-image-t
Shorthand for setting bottom-left-image-t-begin and bottom-left-image-t-end.
bottom-left-image
A shorthand property for setting bottom-left-image-src, bottom-left-image-s-begin, bottom-left-image-t-begin, bottom-left-image-s-end and bottom-left-image-t-end.
bottom-right-image-s
Shorthand for setting bottom-right-image-s-begin and bottom-right-image-s-end.
bottom-right-image-t
Shorthand for setting bottom-right-image-t-begin and bottom-right-image-t-end.
bottom-right-image
A shorthand property for setting bottom-right-image-src, bottom-right-image-s-begin, bottom-right-image-t-begin, bottom-right-image-s-end and bottom-right-image-t-end.
top-image-s
Shorthand for setting top-image-s-begin and top-image-s-end.
top-image-t
Shorthand for setting top-image-t-begin and top-image-t-end.
top-image
A shorthand property for setting top-image-src, top-image-repeat, top-image-s-begin, top-image-t-begin, top-image-s-end and top-image-t-end.
right-image-s
Shorthand for setting right-image-s-begin and right-image-s-end.
right-image-t
Shorthand for setting right-image-t-begin and right-image-t-end.
right-image
A shorthand property for setting right-image-src, right-image-repeat, right-image-s-begin, right-image-t-begin, right-image-s-end and right-image-t-end.
bottom-image-s
Shorthand for setting bottom-image-s-begin and bottom-image-s-end.
bottom-image-t
Shorthand for setting bottom-image-t-begin and bottom-image-t-end.
bottom-image
A shorthand property for setting bottom-image-src, bottom-image-repeat, bottom-image-s-begin, bottom-image-t-begin, bottom-image-s-end and bottom-image-t-end.
left-image-s
Shorthand for setting left-image-s-begin and left-image-s-end.
left-image-t
Shorthand for setting left-image-t-begin and left-image-t-end.
left-image
A shorthand property for setting left-image-src, left-image-repeat, left-image-s-begin, left-image-t-begin, left-image-s-end and left-image-t-end.
center-image-s
Shorthand for setting center-image-s-begin and center-image-s-end.
center-image-t
Shorthand for setting center-image-t-begin and center-image-t-end.
center-image
A shorthand property for setting center-image-src, center-image-repeat, center-image-s-begin, center-image-t-begin, center-image-s-end and center-image-t-end.
The decorator renders across the padded area of its element.