MCS supports several style properties from the CSS3 specification. The following table lists the available effects.
MCS supports several style properties from the CSS3 specification. The following table lists the available effects.
| Effect | Purpose |
|---|---|
| Border images | Page authors can use images instead of the border styles and as an additional background layer for elements. Images can be scaled and stretched to fit the available space. |
| Box shadows | Page authors can use the mcs-box-shadow property to create a blurred and shifted copy of an element that is intended to imitate a shadow effect. |
| Box sizing | The mcs-box-sizing property specifies how the browser should calculate the size of a box. |
| Gradients | Gradients allow page authors to create objects that consist of smooth fades between several colors, so-called "rainbow effects". There are two types of gradients: linear and radial. |
| Opacity | The opacity property controls the transparency level of an element. Please note that the property applied to an element is inherited by all its child elements. |
| Overflow-x and overflow-y | The overflow-x and overflow-y style properties specify whether the content of a block-level element should be clipped when it overflows the element's box. The overflow-x property controls the horizontal clipping, while overflow-y controls the vertical clipping. |
| Overlays | Elements can be positioned on a page in three dimensions: along the X and Y axes, and also along the Z axis. The z-index property specifies the stack level of an element. |
| Reflections | A reflection is a flipped and shifted copy of the selected object with its own overlying mask. |
| Rounded corners | The mcs-border-radius property allows page authors to create boxes with rounded corners. |
| Text overflow | Page authors can use the overflow property to specify that the content of a block-level element should be clipped when it overflows its container, and then provide users with a visual indication that the content has been clipped. The hint is typically the ellipsis character (...), but authors can control the actual character representation using the combination of style rules and meta properties. |
| Text shadows | Page authors can use the mcs-text-shadow property to create a blurred and shifted copy of a text that is intended to imitate a shadow effect. |
| Transparency | You can control the transparency level of an element using the RGBA color model, i.e. the RGB model with the alpha channel specifying the opacity of a color. Please note that the transparency applied to an element is not inherited by its child elements. |
| 2D and 3D transformations | Page authors can use 2D and 3D transformations to modify elements in a two- or three-dimensional space. Elements can be scaled, rotated, translated and skewed. |