HTML and CSS Reference
In-Depth Information
Reflections
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
<html>
<head>
</head>
<body>
<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));">
</body>
</html>
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
