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 the Author: Hi! I'm Ken. I've been using mobiles for over 10 years and technology for a lot longer! I'd love to hear from you.
- Reflection , Web 2.0 , Web Development
- Comments(0)
