X-Reflection: HTML5 Web Component for Adding CSS3 Reflections to any Element

For better or worse WebKit’s -webkit-box-reflect and Mozilla’s -moz-element never made it to the official specification of CSS3, although the latter may come pretty useful and has a lot of potential applications. Personally I am not a fan of reflections and they remind me of the mid 90’s water reflection Java applets but I guess that’s because I am not a designer. Nevertheless, I thought that a custom tag (along with the lazy image loader and x-meme) doing this automatically to all of the HTML elements added into it may come useful, so I implemented AcidJs-X-Reflect, which works like that:

[sourcecode language=”html”]
<acidjs-xreflect>
    <img src="path/to/image-01.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale=".5" opacity=".75" endcolor="#b00">
    <img src="path/to/image-02.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale="2" opacity=".75" endcolor="#00f">
    <img src="path/to/image-03.jpg" height="233" width="310" />
    <p>Lorem ipsum dolor sit amet…</p>
</acidjs-xreflect>
[/sourcecode]

Once the component kicks in, any element inside of it is supplied with a configurable (scale, end color, opacity) reflection:

The reflection is achieved by duplicating the original content in a separate flipped (scaleY(-1)) tag overlayed by a semi-transparent element with gradient. Initially utilized CSS generated content (::after) for the gradient overlay however I noticed that since the effect is applied with JavaScript (all of the properties of the reflection are configurable) the gradient randomly disappeared in Firefox, so eventually I went for a nested <div />. I also gave up the idea of using scoped styles, since they are not widely supported yet.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• endcolor – Reflection end (bottom) color. The value should be a valid color string – named, hex, RGB, etc. The default color is white ("#fff").
• opacity – Reflection translucence. The default value is ".5". ".5" is more transparent "1" is opaque. Values should vary from "0" to "1".
• scale – Vertical scaling of the reflection, relative to the original source. The default value is "1". "2" is twice the original source.

Methods, Getters and Setters

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.