Reflections

A reflection is a mirror image with its own specific transform and mask.

Use the -webkit-box-reflect property to set the direction, offset, and mask of an image‚Äôs reflection as shown in Listing 1.

Listing 1  Creating a reflection using a gradient mask

<img src="ship.jpg" style="-webkit-box-reflect:below 3px

    -webkit-gradient(linear, left top, left bottom, from(transparent),

    color-stop(0.5, transparent), to(white));">

The first argument of the -webkit-box-reflect property specifies the direction of the reflection, which can be either above, below, left, or right. The second argument is the offset or space between the original image and the reflection. The third argument is a mask applied to the reflection. In this example, the mask is specified as a gradient from transparent to white at 50% of the image height, producing a realistic mirror effect as shown in Figure 1.

Figure 1  Reflection

Reflections update automatically as the source image changes. If you hover over links, you‚Äôll see the hover effect happen in the reflection too. If you add a reflection to a video element, the video plays in the reflection as well.

Reflections can be stacked in a way similar to how opacity, transforms, and masks work. A parent ’s reflection is applied to its children and their descendants. The final reflection is built from concatenating all the reflections together, tiling and stretching them as specified.

Also reflections are not interactive elements—mousing or touching a reflection does not generate any events. Reflections have no effect on layout other than being part of a container’s overflow. Reflections behave in a way similar to box shadows in this respect.