H-SMILE engine supports standard set of CSS 2.1 attributes extended by the following:

The flow CSS attribute describes method of placement of blocks in block containers. Typical block containers are div, ul, ol, blockquote, etc. Following table describes values accepted by the flow:

• vertical - default value. Standard layout of <div> element. Contained blocks replaced from top to bottom forming single column spanning width of the container.
• horizontal - horizontal block layout. All contained blocks are replaced in a single row.
• h-flow - multiple rows horizontal layout. All contained blocks are replaced from left to right and from top to bottom forming rows of blocks.
• v-flow - multiple columns horizontal layout. All contained blocks are replaced from top to bottom and left to right forming columns of blocks.

The family of foreground-*** attributes defines foreground image of the DOM element.

Shortcut attribute, mimics background CSS attribute.

Attachment of the foreground image. mimics background-attachment CSS attribute.

Url of the foreground image. mimics background-image CSS attribute.

Position of the foreground image. mimics background-position CSS attribute.

mimics background-repeat CSS attribute.

Type of cursor when mouse hovers the foreground image.

This attribute defines image transformations applied to pixels of the image. Currently it supports following values/functions:

- function that define contrast, brightness and/or gamma color transformations. Sample:

img:hover 
{ 
  foreground-image-transformation: contrast-brightness-gamma(0.5,0.5,1.2);
}

Declaration above will cause increase of gamma value of the image when mouse will hover it. This attribute is used for creating dynamic effects without need of separate images for various states - e.g.disabled or highlighted icon of some button.

color-schema is an image pixels color maping algorithm.

All pixels of original image that have color with r,g,b values equal (levels of gray) are mapped to the custom table.

Custom table (colors in slots 0..255) is made as linear interpolation of 5 strong color points:

fore/background-image-transformation: color-schema(c1,c2,c3,c4,c5);

Where colors correspond to:

1. c1 to gray(r == g == b) == 51;
2. c2 to gray == 102;
3. c3 to gray == 153;
4. c4 to gray == 204;
5. c5 to gray == 255;

This color schema works pretty well for images that have monotone backround and some compact colorful (icon) area. Thus color-schema tranformation makes sense for the cases when you have a skin that provides multiple base color choices. In this case you can use single set of skin images that can be switched to different base colors using solely values in CSS.

Example: original image and transformed image Last image uses following tranformation:

img.custom 
{
  foreground-image-transformation: color-schema(#9a6867,#cca190,#f7eebd,#fefecb,#ffffff);
}