-webkit-box-reflect

The Apple website is synonymous for its use of reflections. Go on any page and you will see at least one instance of this effect on the page, it could be on product or a simple module box, it is everywhere. There is no escaping it.

A few months ago—yes this has been sitting as a draft for quite some time—whilst scanning through Twitter, I noticed that someone had posted a link to the Path website, as they had been rolling out a few subtle improvements and upon clicking the link I immediately noticed the “Apple reflection” being used on certain elements. Intrigued to see how they created this I fired up my console and discovered, to my amazement, that it was actually CSS which was being used.

Click to view the effect
Path using something similar to Apples coverflow.

Below is the exact code which, at the time of writing, they are using to achieve this technique.

.moments_book .book-artwork {
  -webkit-box-reflect: below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.5)));
  text-align: center;
  margin-top: 53px;
  margin-bottom: 64px;
}

The above code is all fairly self explanatory with the exception of perhaps the top attribute -webkit-box-reflect. If we break it down it, here is what is happening;

-webkit-box-reflect: <direction> <offset> <mask-box-image>.

<direction>
The direction in which you would like the reflection to appear. As you might expect, it can be stipulated as above, below, left or right.
<offset>
Is a length or percentage which specifies the distance of the reflection from the edge of the element, in the direction which you would like the reflection to appear.
<mask-box-image>
A mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

It’s probably worth noting that CSS reflections are nothing new, in fact here is an article on the Surfin’ Safari blog, from 2008, which I stumbled across when researching this topic.

It is interesting that reflections haven’t seen as large an uptake as other attributes like border-radius have. One thing is for sure though, box-reflect looks like an amazing feature which will undoubtedly make our jobs a lot easier in the future. Unofrtunately one can only guess as to how long it will take before it is rolled out into the the working draft.