Partial-Gradient Background
Design
The partial-gradient background paints a linear, vertical gradient in a part of the background.
It is usually used in a combined or in a
mask background.
The above background has been realized with the following settings:
backgrounds {
partialTop {
type: partial-gradient;
start: 10%;
end: 20%;
top-color: white;
bottom-color: blue;
}
partialBottom {
type: partial-gradient;
start: 20%;
end: 40%;
top-color: blue;
bottom-color: white;
}
formFg {
type: combined;
foreground: partialTop;
background: partialBottom;
}
formBg {
color: white;
}
}
.myForm {
background {
type: combined;
foreground: formFg;
background: formBg;
}
}
CSS attributes:
| CSS Attribute | Default | Values | Explanation |
|---|---|---|---|
| type | partial-gradient | - |
Set the type to partial-gradient.
|
| top-color | white | color definition | The color of the background at the top, can be a rbg/hexadecimal value of the color or the name of the color as defined in the colors section. |
| bottom-color | blue | color definition | The color of the background at the bottom, can be a rbg/hexadecimal value of the color or the name of the color as defined in the colors section. |
| start | 30% | percent value |
The desired start point of the gradient.
background-start: 20%; |
| end | 70% | percent value |
The desired end point of the gradient.
background-bottom: 70%; |
| stroke | solid | solid, dotted | The stroke style of the gradient. |
JavaDoc
