box — el bloque de color
Fondos, velos, bandas y degradados.
El componente más sencillo, y uno de los más útiles: fondos, velos, bandas, separadores. 16 propiedades.
<box name="fond" extra="true">
<pos>0 0</pos>
<size>1 1</size>
<color>101820</color>
<zIndex>1</zIndex>
</box>| Propiedad | Función |
|---|---|
pos size origin rotation rotationOrigin | colocación |
color | color liso |
colorTop colorBottom | degradado vertical |
colorLeft colorRight | degradado horizontal |
colorTopLeft colorTopRight colorBottomLeft colorBottomRight | degradado por las cuatro esquinas |
zIndex disabled | profundidad, apagado |
Nada de path: un box no muestra ninguna imagen. Para un fondo con imagen, usa image.
El velo de legibilidad
El caso de uso más frecuente: hacer legible un texto sobre cualquier imagen.
<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>De transparente a negro al 75 %: la parte baja de la pantalla se oscurece progresivamente, y el texto colocado encima queda legible sea cual sea el material gráfico de detrás.
Una banda fina
<box name="filet" extra="true">
<pos>0.06 0.18</pos>
<size>0.3 2p</size>
<color>FFFFFF40</color>
</box>2p = dos píxeles de alto, sea cual sea la resolución: uno de los raros casos donde la unidad en píxeles es la elección correcta.