Adding reflections using CSS3

Now with CSS3 we can add reflections to HTML elements in webkit based browsers. Not only that, the reflection moves with the element, say if your element is moving or animating the reflection also moves along it, giving it a nice visual appeal. Here is a quick example of adding reflections. The effect is very nice and looks similar to flash based reflection effect that I used to do by replicating movie clips and masking.


http://jbk404.site50.net/css3/reflection/

CSS3 property for reflection

The basic syntax is

-webkit-box-reflect: <direction> <offset> <mask-box>;

 See an example below,

<style type="text/css">
        #ipod
        {
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
        }
</style>

where #ipod is the CSS selector for the id of an image. You will see this later. The various values are,

<direction> – the direction of the reflection relative to the HTML element. Its values are ,
above – reflection appears above the element.
below – reflection appears below the element.
left – reflection appears to the left of the element.
right – reflection appears to the right of the element.

<offset> – distance between the reflection and the edge of the element. eg. 5px where 5 px is the gap between the iPod and its reflection. Check out the image.

<mask-box> –  This is an important property and is the masking box. This is actually the CSS3 gradient applied to the reflected image. If you see the example above you will notice that a linear gradient of the actual image is our masking box. We are adding a -webkit-gradient from top to bottom (linear gradient) and then from transparent to white. So we are defining a masking box which fades out at the bottom giving it a reflection effect. Notice the color stop value (0 to 1) which defines the height of the reflected image. Note that if you do not define the mask box then there is no masking of the reflected image. Only you will get an inverted image of the actual element. Try it.

Complete example code

Here is the complete example. I have also added an animation to the iPod image to test that the reflection moves along with its originator.

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Reflection</title>
    <style type="text/css">
        #ipod
        {
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
            -webkit-transition: -webkit-transform 0.4s ease-out;
            margin-top:20px;
        }
    </style>
    <script type="text/javascript">
        function moveElement() {
            document.getElementById("ipod").style.webkitTransform = "translateX(400px)";
        }
    </script>
</head>
<body>
     <input type="button" value="Move the iPod" onclick="moveElement()" />
     <br />
     <img id="ipod" src="images/ipod.png" alt="iPod with reflection"/>
</body>
</html>

Demo
Here is the link to the demo application. Click on the button to see the reflection move.
http://jbk404.site50.net/css3/reflection/

Important points

Some other important points to note are

  • The reflection is not interactive i.e you cannot click or add events to it.
  • The reflection moves along with the animation.
  • Reflections doesn’t affect the page layouts. It will overlap over other elements.
  • This example with -webkit-box-reflect property runs only on web-kit based browsers – Chrome and Safari
  • Although not supported in Firefox, but there are ways to add reflections in latest versions of Firefox (>4) using the Firefox specific style ‘-moz-element’. Will research and post something on it.

One thought on “Adding reflections using CSS3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s