Reflections

A reflection is a flipped and shifted copy of the selected object with its own overlying mask.

A reflection is a flipped and shifted copy of the selected object with its own overlying mask.

Reflections

Configuring reflections

You use the mcs-box-reflect-edge, mcs-box-reflect-offset and mcs-box-reflect-alpha-mask properties, or the mcs-box-reflect shorthand property to configure reflections.

The mcs-box-reflect-edge property specifies the position of the reflection relative to the edge of the original box. The default value of 'none' means that the reflection will not be created.

The mcs-box-reflect-offset property specifies the distance of the reflection from the edge of the original box. The value of the property must be given in length units or as a percentage. The default value is '0'.

The mcs-box-reflect-alpha-mask property allows page authors to define a mask that will be used to overlay the 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 of 'none' means that the reflection will have no mask.

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)));

The mcs-box-reflect shorthand property has the following syntax:

mcs-box-reflect:
  <mcs-box-reflect-edge>
  <mcs-box-reflect-offset>
  <mcs-box-reflect-alpha-mask>;

For example:

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)));

Features

Support for reflections is represented by the following feature:

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>Reflections</title>
    <style type="text/css">
      .reflection {
        mcs-box-reflect-edge: bottom;
        mcs-box-reflect-offset: 5px;
        font-style:italic;
      }
    </style>
  </head>
  <body>
    <div>
      <h1 class="reflection">Getting started</h1>
    </div>
  </body>
</html>

Related topics