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: none;
animation: hoverOut 500ms ease-out;
animation: fadeIn 200ms linear, fadeOut 400ms ease-out;
animation: flyInTop 500ms ease-out, flyOutBottom 500ms ease-in;

<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:

hoverIn, hoverOut
Animates the transition of the background when the mouse is moved over (hover-in) or leaves (hover-out) the widget. Requires that the pseudo class hover is used to define the alternate background. The effect only works between two background colors or two gradients. The gradients should have the same number of colors. Other changes like the border or text-color are currently not animated.
fadeIn, fadeOut
Animates the emergence (fadeIn) or disappearance (fadeOut) of a widget by gradually changing its opacity.
slideIn, slideOut
Animates the emergence (slideIn) or disappearance (slideOut) of a widget by gradually changing its height.
flyInTop, flyInRight, flyInBottom, flyInLeft, flyOutTop, flyOutRight, flyOutBottom, flyOutLeft
Animates the emergence (flyIn) or disappearance (flyOut) of a widget by gradually changing its origin point until it reaches the target coordinates.

<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:

background-image: none;
background-image: url( path/my-image.png );

background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 48%, #f0f0f0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #ffffff )
  );

<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: none;
border: 1px solid red;
border: 3px outset;

<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-radius

Defines the four radii of a rounded border.

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

The first value defines the horizontal offset of the shadow. May be negative.
The second value defines the vertical offset of the shadow. May be negative.
The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.
The optional fourth value defines the spread of the shadow. It is currently not supported and therefore must be 0px. The default value is 0px.
The final value defines the color of the shadow.

Examples:

box-shadow: 5px 5px black;
box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 );
box-shadow: 5px 5px 2px 0px #FF00FF;

<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:

color: rgba( 255, 128, 0, 0.33 );
color: rgba( 100%, 50%, 0%, 1 );

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>

The first value defines the horizontal offset of the shadow. May be negative.
The second value defines the vertical offset of the shadow. May be negative.
The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.
The final value defines the color of the shadow.

Examples:

text-shadow: 2px 2px black;
text-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 );
text-shadow: 1px 1px 0 #FF00FF;

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:

color: #FF8800;
color: #F80; /* same as above */

<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:

color: rgb( 255, 128, 0 );
color: rgb( 100%, 50%, 0% ); /* same as above */

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:

font: italic bold 16px serif;
font: 11px 'Segoe UI', Corbel, Calibri, Tahoma, 'Lucida Sans Unicode', sans-serif;

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:

0px
20px
100px

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.

When only one value is given, it is used for all four dimension.
When two values are given, the first is used for top and bottom, the second for left and right.
When three values are given, the first value is used for top, the second for left and right, and the third for bottom.

Examples:

padding: 0px;
margin: 3px 5px 3px 5px;
margin: 3px 5px; /* same as above */
border-radius: 5px;

opacity

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

Examples:

opacity: 1;
opacity: 0.764467;
opacity: 0;

text-decoration

Additional decorative effects to render a text with.

Format: underline | overline | line-through | none

Examples:

text-decoration: line-through;

width

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

Format: <dimension>