HTML5, CSS3 & JS Experiments

By Martin Ivanov

Element Reflections

AcidJs.XReflect is a HTML5 Web Component that adds fully configurable cross-browser reflections to any HTML element, without the need to use vendor-specific CSS like -webkit-box-reflect or the -moz-element workarounds. All you need to do is to wrap your content in:

<acidjs-xreflect>
    <img src="http://wemakesites.net/images/music/bc-rich-stealth/image-01.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale=".5" opacity=".75" endcolor="#b00">
    <img src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-02.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale="2" opacity=".75" endcolor="#00f">
    <img src="http://wemakesites.net/images/music/carvin-legacy-3/image-06.jpg" height="233" width="310" />
    <p>Lorem ipsum dolor sit amet...</p>
</acidjs-xreflect>

If you are interested in other HTML5 Web Components extending images you may want to check X-Meme and X-Image.

Demo

Image Reflections

Text Reflections

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XReflect/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XReflect/classes/XReflect.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
<h3>Image Reflections</h3>

<acidjs-xreflect>
    <img src="http://wemakesites.net/images/music/bc-rich-stealth/image-01.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect>
    <img src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-02.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect>
    <img src="http://wemakesites.net/images/music/carvin-legacy-3/image-06.jpg" height="233" width="310" />
</acidjs-xreflect>

<h3>Text Reflections</h3>

<acidjs-xreflect>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</acidjs-xreflect>
        
/*
 * X-Reflect HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

acidjs-xreflect,
acidjs-xreflect *,
acidjs-xreflect::before,
acidjs-xreflect::after,
acidjs-xreflect *::before,
acidjs-xreflect *::after
{
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xreflect acidjs-xreflect-content,
acidjs-xreflect acidjs-xreflect-reflection
{
    display: block;
}

acidjs-xreflect,
acidjs-xreflect img
{
    display: inline-block;
}

acidjs-xreflect
{
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
}

acidjs-xreflect img
{
    vertical-align: middle;
}

acidjs-xreflect acidjs-xreflect-reflection
{
    overflow: hidden; 
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}

acidjs-xreflect acidjs-xreflect-reflection div
{
    -webkit-transform: scaley(-1);
    -moz-transform: scaley(-1);
    -ms-transform: scaley(-1);
    transform: scaley(-1);
}

acidjs-xreflect > div
{
    position: relative;
}

acidjs-xreflect acidjs-xreflect-reflection div:last-child
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}