CSS Reflections in WebKit
May 8th, 2008
In the latest builds of Safari, you can reflect images using just CSS. Apple have come up with the proprietary -webkit-box-reflect CSS property for this.
reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.
-webkit-box-reflect: <direction> <offset> <mask-box-image>
<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.
Why use this over Reflection.js? Well, you can reflect any element – not just images. This includes for example the <video> element. But unfortunately it’ll only work in Safari and as far as I know, no other browser vendors are in the process of implementing anything similar.
In the future perhaps Reflection.js will simply provide a wrapper using <canvas> in Firefox and Opera, Webkit CSS in Safari and VML in Internet Explorer (at the moment canvas is also used in Safari).
| About Ken | |
 | My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004. I have experience communicating mobile technology and presenting new mobile products both online and offline, including at various trade shows and events. You can check out my profile or drop me an e-mail. |
- Reflection , Web 2.0 , Web Development
- Comments(1)
Not only Safari supports it, Google Chrome also supports it.