<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.
© 2006 - 2023 Martin Ivanov