box — the color block
Backgrounds, veils, bands and gradients.
The simplest component, and one of the most useful: backgrounds, veils, bands, separators. 16 properties.
<box name="fond" extra="true">
<pos>0 0</pos>
<size>1 1</size>
<color>101820</color>
<zIndex>1</zIndex>
</box>| Property | Role |
|---|---|
pos size origin rotation rotationOrigin | placement |
color | solid color |
colorTop colorBottom | vertical gradient |
colorLeft colorRight | horizontal gradient |
colorTopLeft colorTopRight colorBottomLeft colorBottomRight | four-corner gradient |
zIndex disabled | depth, switching off |
No path: a box displays no image. For an image background, take image.
The readability veil
The most common use case: making a text readable over any image.
<box name="voile-du-bas" extra="true">
<pos>0 0.7</pos>
<size>1 0.3</size>
<colorTop>00000000</colorTop>
<colorBottom>000000C0</colorBottom>
<zIndex>20</zIndex>
</box>From transparent to 75% black: the bottom of the screen darkens progressively, and the text placed on top stays readable whatever the artwork behind.
A thin band
<box name="filet" extra="true">
<pos>0.06 0.18</pos>
<size>0.3 2p</size>
<color>FFFFFF40</color>
</box>2p = two pixels tall, whatever the resolution: one of the rare cases where the pixel unit is the right choice.