CSS Property Reference

This is a description of CSS properties recognized by RAP and their admissible values.

animation

Defines one or more animated effects.

Any number of animations can be set at once, separated by commas. To disables all animations, set only none.

Format: <animation-name> <animation-duration> <animation-timing-function> (, <animation-name> <animation-duration> <animation-timing-function> )* | none

Examples:

<animation-name>

References the name of an effect the widget supports. (See the animation-description of the individual widgets.) Unsupported effects will be ignored. (However the effect might be supported in the future and then not be ignored anymore.) If the given effects contradict each other (e.g. fadeIn and slideIn), the widget may use either one.

Currently existing effects:

<animation-duration>

The duration of the effect in seconds or milliseconds.

Format: positive integer, immediately followed by s or ms.

<animation-timing-function>

Describes how the animation progresses over time.

Valid values are: ease, linear, ease-in, ease-out and ease-in-out.

background-color

Defines the color used as the background of the element:

Format: <named-color> | <hex-color> | <rgb-color> | <rgba-color> | transparent

Semi-transparent backgrounds may not be supported on all widgets, in which case the alpha channel of the rgba-color format will be ignored. If support for rgba-color is present, it is explicitly noted on the element.

background-image

Defines either an image or a color-gradient to cover the background of a widget. May also be none, in this case background-color will be used.

Format: <image-url> | <color-gradient> | none

Examples:

<image-url>

Supported image-formats are jpeg, gif and png. The path is relative to the root of the bundle.

Format: url(, followed by the path and filename, followed by ).

<color-gradient>

Format: gradient(, followed by a list of comma-separated arguments, followed by ).

The first three arguments define the type and direction of the gradient. RAP currently only supports linear vertical gradients from the top to the bottom and linear vertical gradients from left to right. Therefore these arguments have to be either exactly "linear, left top, left bottom" or exactly "linear, left top, right top". Any other arguments will produce an error.

After this, the colors are defined. At least two colors have to be given, using from( COLOR ) and to( COLOR ). Between these two, any number of colors may be defined using color-stop( POSITION, COLOR ).

POSITION is a ascending percentage value.
COLOR is <named-color> | <hex-color> | <rgb-color>.

For the same widget, background-image should not be combined with any background-color other than transparent, as the behavior of RAP for this case is not defined and may differ from case to case.

border

Used to define the border that is drawn around a widget or a part of a widget.

Format: <border-width> <border-style> <border-color>

All 3 values are optional, though at least one must be given.

Examples:

<border-width>

The width of the border. Defaults to 0px.

Format: <dimension>

<border-style>

One of the following values: solid, dotted, dashed, hidden, double, inset, outset, groove, ridge, none.
Defaults to solid.

Note that if border-radius of the same widget has a value larger than 0px, any border-style other than none or hidden is interpreted as solid.

<border-color>

Format: <named-color> | <hex-color> | <rgb-color> | transparent
Is black by default.

border-top

See border.

border-bottom

See border.

border-left

See border.

border-right

See border.

border-radius

Defines the four radii of a rounded border.

Format: <box-dimension>

Note that in this case the box-dimension values stand for top-left top-right bottom-right bottom-left.

border-color

Defines only the color of the border.

Format: <border-color>

background-gradient-color

This property is currently ignored.

Format: <named-color> | <hex-color> | <rgb-color>

border-top-color

Defines only the color of the upper border.

Format: <border-color>

border-bottom-color

Defines only the color of the lower border.

Format: <border-color>

box-shadow

Used to define the shadow that is drawn behind the widget.

Format: <shadow> | none

<shadow>

Format: <dimension> <dimension> (<dimension> (<dimension>)?)? <shadow-color>

Examples:

<shadow-color>

Format: <named-color> | <hex-color> | <rgb-color> | <rgba-color>

<rgba-color>

Like the <rgb-color> notation, but with one more parameter for opacity as used in the opacity attribute.

Examples:

text-shadow

Used to define the shadow that is drawn behind the widget text. Note: Internet Explorer does not support text shadow.

Format: <text-shadow> | none

<text-shadow>

Format: <dimension> <dimension> (<dimension>)? <shadow-color>

Examples:

color

The color used for foreground-elements, e.g. Text.

Format: <named-color> | <hex-color> | <rgb-color> | inherit

<named-color>

Valid color-names are: black, gray, silver, white, maroon, red, purple, fuchsia, green, lime, navy, blue, olive, yellow, teal, aqua.

<hex-color>

The format in hexadecimal notation is a # immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros.

Examples:

<rgb-color>

The format in the rgb notation is rgb(, followed by a comma-separated list of three numerical values (either integer or percentage), followed by ). The integer value 255 corresponds to 100%.

Examples:

cursor

Defines a the form of the mouse pointer over a certain widget.

Format: <cursor-type> | <image-url>

<cursor-type>

One of the following: default, wait, crosshair, help, move, text, pointer, e-resize, n-resize, w-resize, s-resize, ne-resize, se-resize, nw-resize, sw-resize, col-resize, row-resize, progress, not-allowed, no-drop.

font

The font used to render the text.

Format: (<font-style>)? (<font-weight>)? <font-size> <font-family>

<font-style>

Optional value, may be normal or italic. Is normal by default.

<font-weight>

Optional value, may be normal or bold. Default is normal.

<font-size>

Height of the text in pixels. See <dimension>.

<font-family>

Name of the font that should be used. Is ignored if the font is not available on the client-system.
Several comma-seperated values can be given. The order is relevant, as the first available font will be used.
Font names containing any white spaces must be quoted.

As a fallback mechanism, one of the following generic fonts should be given as the last value: serif, sans-serif, cursive, fantasy, monospace.

For the color of the text, the color-property is used. Effects can be added using text-decoration.

Examples:

height

A dimension that defines the height of certain parts of a widget.

Format: <dimension>

<dimension>

A non-negative integer with px as unit. May be zero.

Examples:

margin

Defines the distance between the element and its surroundings.

Format: <box-dimension>

<box-dimension>

Defines four dimensions, in the order of top right bottom left.

Examples:

opacity

A rational number between (and including) 0 and 1 without a unit.

Examples:

padding

Defines the distance between the elements border and its content.

Format: <box-dimension>

rwt-fontlist

The font list returned by Display#getFontList().

See font

rwt-error-image

Defines an RWT system image.

Format: <image-url>

rwt-information-image

Defines an RWT system image.

Format: <image-url>

rwt-working-image

Defines an RWT system image.

Format: <image-url>

rwt-question-image

Defines an RWT system image.

Format: <image-url>

rwt-warning-image

Defines an RWT system image.

Format: <image-url>

rwt-shadow-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-highlight-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-darkshadow-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-lightshadow-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-thinborder-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-selectionmarker-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

rwt-infobackground-color

Defines an RWT system color.

Format: <named-color> | <hex-color> | <rgb-color>

spacing

A dimension that defines the distance between certain parts of a widget.

Format: <dimension>

text-decoration

Additional decorative effects to render a text with.

Format: underline | overline | line-through | none

Examples:

width

A dimension that defines the width of certain parts of a widget.

Format: <dimension>