CSS : Multi-background images

Kuix allow developpers to enhance the user interface style by allowing the use of multi-background. Kuix implements a system similar as CSS3 (which include muti background) and provide same rendering.

Basic Usage

Such as HTML do sometimes, you can add multiple containers or widgets to produce a layout "table-like". This is very discouraged to do like that because it's very greedy in ressources and an important rule is broken: the UI data is created to provide style appearance. The multi-background is the easiest, quickiest and ressource-safe method to provide a strong style without the need to adapt UI content (screen, widgets, etc...).

We will show you how to create a styled choice widget and then create an arrow with multi-background for this choice:

mainscreen.xml:
<screen title="Kuix multi-background choice">
    <choice>
        <choiceRadioGroup value="item1">
            <radioButton value="item1">item1</radioButton>
            <radioButton value="item2">item2</radioButton>
            <radioButton value="item3">item3</radioButton>
        </choiceRadioGroup>
    </choice>
</screen>

 

And the following CSS for the choice widget:

style.css:
choice {
    border-color: #838386;
    border: 1;
    bg-image: url(title_gradient.png);
    min-size: 20 20;
    padding: 0 0 0 4;
}
choice:hover {
    border-color: #f19300;
    bg-color: #555558;
    color: white;
}

radiobutton {
    padding: 1 0 1 10;
    border: 1;
}
radiobutton:selected text {
    color: #ffffff;
}
radiobutton:hover {
    border-color: #f19300;
}

 

Here is the CSS for the screen to layout a fill horizontal and vertical centered choice widget:

style.css:
screen {
    layout: inlinelayout(false,fill);
    align: fill-center;
    padding: 0 5 0 5;
}

 

To simplify this guide, we will not includes theses properties in next sources codes.

To place the arrow picture on the right of the choice widget (such as combobox do) we need to use multi-background:

style.css:
choice {
    bg-image: url(title_gradient.png) | url(choice_arrow.png);
}

 

You just have to separate with '|' character all the image you need.

If you put choice_arrow.png before title_gradient.png, he will be not visible because title_gradient.png don't have any transparency and will hide the choice_arrow.png. So the order is very important because it determins the paint order.

Here is what you get at with previous multi-background code:

The arrow is repeat but it isn't our goal there.
So we need to specify a repeat style property:

style.css:
choice {
    bg-image: url(title_gradient.png) | url(choice_arrow.png);
    bg-repeat: 0 0 | 1 1;
}

 

You just need now to add the background align:

style.css
choice {
    bg-image: url(title_gradient.png) | url(choice_arrow.png);
    bg-repeat: 0 0 | 1 1;
    bg-align: top-left | right;
}

 

If you want to do a padding to background, the easiest and ressource-safe way is to add transparent area right to the arrow in arrow picture: Here the arrow picture is changed to include 4 colomns of transparent pixels on his right side.

Usage in details

We will now show you how Kuix works when you specify different number of "layer" into background style properties (bg-repeat and bg-align).

Less property values than layer number

myWidget {
    bg-image: url(layer1.png) | url(layer2.png) | url(layer3.png) | url(layer4.png) | url(layer5.png);
    bg-repeat: 0 0 | 1 1;
}

 

In this example, we have 5 layers of background but 2 values only on bg-repeat.
In this case, Kuix do same as CSS3 interpretation:
layer1.png bg-repeat value is 0 0.
layer2.png bg-repeat value is 1 1.
layer3.png bg-repeat value is 0 0. (it takes the first one).
layer4.png bg-repeat value is 1 1. (it takes the second one).
layer5.png bg-repeat value is 0 0. (it takes the first one).
As you can see, it works like a loop.
Layer1 is property1, Layer2 is property2, Layer3 is property3. But there is no property3 so we restart and give Layer3 the property1 etc...

More property values than layer number

myWidget {
    bg-image: url(layer1.png) | url(layer2.png);
    bg-align: top-left | right | bottom | top-right | left;
}

 

This example works similar as "Less property values than layer number".
When there is less property values than layer number, the layer will loop. Here, new layers will be created according to the number of property with the bg-image list.
It gives:
Layer1 is top-left aligned.
Layer2 is right aligned.
Layer3 is bottom aligned. This is in fact layer1.png which is used.
Layer4 is top-right aligned. It uses layer2.png.
Layer5 is left aligned. It uses layer1.png.

The total number of layer is not rules by the number of bg-image values but the maximum number of values of bg-image, bg-repeat or bg-align.