HTML and CSS Reference
Similar with the browser support with masks, CSS reflections are a new way of adding a reflection to any DOM object
such as images, shapes, canvas elements, and even HTML5 video. Using the webkit-box-reflect property, you
can repeat an element in any direction, apply an offset, and even use a mask, as you've just learned. To use the CSS
reflections rule, you'll need to take a look at the syntax:
-webkit-box-reflect: <direction> <offset> <mask-box-image>
The property gets a direction value, an offset value, and a mask. Using this syntax on your example image, you
can yield the code outlined in Listing 12-5.
Listing 12-5. CSS Reflections Example
<img src="image.jpg" style="-webkit-box-reflect:below 2px -webkit-gradient(linear, left top,
left bottom, from(transparent), color-stop(0.4, transparent), to(white));">
As you can see, you use this with an inline style attribute on your image element. For the first rule of direction,
you set it to below . For the second rule of offset, you specify 2px , and for the third, you apply a mask gradient so the
image looks like it tapers off into nothingness. If you test this example in your browser, you should get the result
shown in Figure 12-6 .
Figure 12-6. The example for CSS reflections