images

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:

<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>

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

x-refelct-image-01 x-refelct-image-02

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.

Advertisements

X-IMG: HTML5 Web Component for Image Lazy Loading and More

thumb

AcidJs.XImg is a HTML5 Web Component, wrapped as a custom extended image tag supporting out-of-the-box lazy loading, native getters, setters and JavaScript methods. And what is is most important, using it is as simple as:

<acidjs-ximg
    width="310"
    height="233"
    src="images/image-01.jpg">
</acidjs-ximg>

<acidjs-ximg
    width="310"
    height="233"
    placeholder="path/to/custom/placeholder.png",
    src="images/image-01.jpg">
</acidjs-ximg>

 

HTML Attributes of the Tag

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

  • src – URI of the image that will be loaded when scrolled into view.
  • width – width of the image in pixels.
  • height – Height of the image in pixels.
  • title – Optional title of the image.
  • placeholder – Optional URI to the placeholder image. If not set, one of the system will be used (Check the PLACEHOLDERS object in the AcidJs.XImg/classes/XImg.file). You can create your own base-64-encode placeholder with this online tool and add them to the PLACEHOLDERS.

All attributes are also getters/setters.

JavaScript Events of the Tag

Any native JavaScript event (click, mouseover, etc.)

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

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. You may also want check this blog post to learn how to implement lazy loading with images with JavaScript only.

JavaScript Lazy Loader for Images and Galleries

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here is a quick and dirty JavaScript class for lazy loading of images which can be used to optimize the page loading time by offsetting the load of lengthy image lists. Supports server and JavaScript rendering and data files (json).

Check the demo and the code here, and eventually download it from the same page.

Have a great week!

Related Posts and Links