Reflection properties

Purpose

Properties used to control reflections. A reflection is a flipped and shifted copy of an object with its own overlying mask. Refer to the topic entitled Reflections for more information.

Controls

Control Description Options Property
Alpha Mask Defines a mask which will be used to overlay a reflection. The mask can be specified as an image policy or a device dependent mime type. The mcs-gradient() function can also be used. URL, <image_policy>, mcs-gradient() theme_reflections_prop.html#mcs-box-reflect-alpha-mask
Position To Edge Specifies the position of the reflection relative to the edge of the original box. top, right, bottom, left, none theme_reflections_prop.html#mcs-box-reflect-edge
Offset Specifies the distance of the reflection from the edge of the original box. <length>, <percentage> theme_reflections_prop.html#mcs-box-reflect-offset

Properties

mcs-box-reflect-alpha-mask

Allows page authors to define a mask which will be used to overlay a reflection. The mask can be specified as an image policy or a device dependent mime type. The mcs-gradient() function can also be used. The default value is 'none'.

Option Description
none No image will be displayed.
url('URI') The URI of the image to display.
mcs-component-url('URI') The URI of the image policy to use.
mcs-transcodable-url('URI') The URI of the image to use. The image will be transcoded, if necessary.
mcs-gradient() The gradient function to render.
inherit The value of the property should be inherited from the parent element.
mcs-box-reflect-edge

Specifies the position of the reflection relative to the edge of the original box. The default value is 'none'.

Option Description
top, right, bottom, left Specifies the position of the reflection relative to the edge of the original box.
none The reflection will not be created.
inherit The value of the property should be inherited from the parent element.
mcs-box-reflect-offset

Specifies the distance of the reflection from the edge of the original box. The default value is '0'.

Option Description
<length> Defines the offset in length units.
<percentage> Defines the offset as a percentage.
inherit The value of the property should be inherited from the parent element.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Reflection examples</title>
    <style type="text/css">
      object#reflect_logo {
        mcs-box-reflect-edge: right;
        mcs-box-reflect-offset: 20px;
      }
      object#reflect_logo_shorthand {
        mcs-box-reflect: right 20px;
      }
      div#reflect_div_alpha_mask {
        width: 100px;
        height: 100px;
        background-color:red;
        border:2px solid black;
        mcs-box-reflect-edge: right;
        mcs-box-reflect-offset: 20px;
        mcs-box-reflect-alpha-mask: mcs-gradient(
          radial,
          25px 75px,
          75px,
          0px 25px,
          0px,
          mcs-color-stop(rgba(80,80,80,0.5)),
          mcs-color-stop(rgba(25,25,106,0.5)),
          mcs-color-stop(rgba(255,165,0,1)));
      }
      div#reflect_div_shorthand {
        width: 100px;
        height: 100px;
        background-color:red;
        border:2px solid black;
        mcs-box-reflect: right 20px mcs-gradient(
          radial,
          25px 75px,
          75px,
          0px 25px,
          0px,
          mcs-color-stop(rgba(80,80,80,0.5)),
          mcs-color-stop(rgba(25,25,106,0.5)),
          mcs-color-stop(rgba(255,165,0,1)));
      }
        </style>
  </head>
  <body>
    <div>
      <h2>Examples of CSS3 reflection usage</h2>
      <h4>reflecting image policy</h4>
      <object src="images/logo.mimg" id="reflect_logo">
        <span>Antenna Software</span>
      </object>
      <div>Styles specified using individual properties:</div>
      <div>
        <div class="code">object#reflect_logo {</div>
        <div class="code">mcs-box-reflect-edge: right;</div>
        <div class="code">mcs-box-reflect-offset: 20px;</div>
        <div class="code">}</div>
      </div>
      <h4>using mcs-box-reflect shorthand</h4>
      <object src="images/logo.mimg" id="reflect_logo_shorthand">
        <span>Antenna Software</span>
      </object>
      <div>Styles specified using shorthand:</div>
      <div>
        <div class="code">object#reflect_logo_shorthand {</div>
        <div class="code">mcs-box-reflect: right 20px;</div>
        <div class="code">}</div>
      </div>
      <h4>using mcs-box-reflect-alpha mask property</h4>
      <div id="reflect_div_alpha_mask"> </div>
      <div>Styles specified using individual properties:</div>
      <div>
        <div class="code">div#reflect_logo_alpha_mask {</div>
        <div>mcs-box-reflect-edge: right;</div>
        <div>mcs-box-reflect-offset: 20px;</div>
        <div>mcs-box-reflect-alpha-mask: mcs-gradient(radial, 25px 75px, 75px, 0px 25px, 0px,
          mcs-color-stop(rgba(80,80,80,0.5)), mcs-color-stop(rgba(25,25,106,0.5)),
          mcs-color-stop(rgba(255,165,0,1)));</div>
        <div class="code">}</div>
      </div>
      <h4>using mcs-box-reflect-alpha mask property in shorthand</h4>
      <div id="reflect_div_shorthand"> </div>
      <div>Styles specified using shorthand:</div>
      <div>
        <div class="code">object#reflect_logo_shorthand {</div>
        <div class="code">mcs-box-reflect: right 20px mcs-gradient(radial, 25px 75px, 75px, 0px 25px,
          0px, mcs-color-stop(rgba(80,80,80,0.5)), mcs-color-stop(rgba(25,25,106,0.5)),
          mcs-color-stop(rgba(255,165,0,1)));</div>
        <div id="code">}</div>
      </div>
    </div>
  </body>
</html>

Related topics