Feature | Description | StyleSeet support | Designtime support | Web Client support | Smart Client support |
---|
Rounded Borders | Ability to have borders with rounded corners. | Yes, through the CSS3 border-radius property
Property Syntax:
- border-radius: radi:px|%
- border-radius: horizontal-radi:px|% / vertical-radi:px|%
Examples:
- border-radius: 5px
- border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
- border-radius: 5px;
- border-radius: 5px 10px / 10px;
| Yes, using the Rounded Border borderType | Yes, depending on the browser support for the border-radius property | Previous version of Servoy already supported Rounded Borders through the SpecialMatte borderType value. Additionally there is now also a RoundedBorder borderType value, which offers more flexibility.
Due to limitations in the Look and Feels used within the Smart Client, background-colors of elements bleed out of a rounded border and/or LAFs have a border hardcoded into the Look and thus do not render the Rounded Boder or render both. |
Gradient backgrounds | Ability to have background color transition from one color to another color. Support is currently restricted to linear gradients with a start and end color and a vertical or horizontal orientation | Yes, through the linear-gradient value for the CSS background-image property
Property Syntax:
- background-image: linear-gradient(<orientation:top|left>,<startColor>,<endColor>);
Examples: - background-image: linear-gradient(top, white, gray);
- background-image: linear-gradient(left, #fefcea, #f1da36);
| No | Yes, depending on browser support. With the current restrictions in place, the browser support is good, including older IE versions | Only on Forms and Form Parts and only horizontal gradients
|
Semi transparent colors | Ability to use colors that are not 100% opaque, but semi transparent, which means that whatever lies underneath partially shines through | Yes, using rgba values instead of hex of rgb values.
Value Syntax:
- rgba(red:0-255, green:0-255, blue:0-255, opacity:0-1)
Examples: - color: rgba(255, 0, 0, 0.5) //50% transparent red
- background-color: rgba(0, 255, 0, 0.1) //10% transparent green
- border-color: rgba(0, 0, 255, 0.9) //90% transparent blue
| No | Yes, depending on browser support | No |
Opacity | Ability to make an component and all it's children render semi-transparent | Yes
Property Syntax:
- opacity: 0.0-1.0
Examples: - opacity: 0.5 //the component and it's children all become 50% transparent
| No | Yes, depending on browser support | No |
Background Images | Ability to have the background of a Form, Form Part or element rendered using an image. The image can optionally be repeated horizontally, vertically or both The image can be set in a certain position The image can be fixed in position within a scrollable panel The image can be resized before being used | Yes
Property Syntax:
- background-image: url(media:///myImage.png);
- background-position: vertical:top|center|bottom|px|% horizontal:top|center|bottom|px|%;
- background-repeat: repeat|repeat-x|repeat-y|no-repeat;
- background-attachment: fixed|scroll;
- background-size: px|% px|%;
| No | Browser support for background-image, background-position, background-repeat and background-attachment is good, as they are part of CSS 2.1. Support for background-size is restricted to modern browsers, as it's part of CSS3 | Only on Forms and Form Parts |