CSS reflections for Firefox, with -moz-element() and SVG masks

1 · Lea Verou · June 29, 2011, midnight
Summary
We all know about the proprietary (and imho, horrible) -webkit-box-reflect. However, you can create just as flexible reflections in Firefox as well, by utilizing -moz-element(), some CSS3 and Firefox’s capability to apply SVG effects to HTML elements. And all these are actually standards, so eventually, this will work in all browsers, unlike -webkit-box-reflect, which was never accepted by the CSS WG. First and foremost, have a look at the demo: How it works For every element, we generate an :...