HTML5, CSS3 & JS Experiments

            <p>If you are interested in the exciting technology of 
                <a href="html5-web-components.html" target="_blank">HTML5 Web Components</a> 
                you may want to check a <a href="x-reflect-html5-web-component.html" target="_blank">similar experiment</a>, 
                wrapped as a reusable custom tag.</p>
            
            <ul class="pictures-list">
                <li><div class="css-reflection kitten-01"></div></li>
            </ul>
        

.css-reflection
{
    position: relative;
    width: 192px;
    height: 192px;
}

.css-reflection::before,
.css-reflection::after
{
    content: "";
    position: absolute;
    top: 100%;
    z-index: -1;
    display: block;
    width: inherit;
    height: inherit;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    
}

.css-reflection::before
{
    border: inherit;
    background: inherit;
    -moz-transform: scaley(-1);
    -webkit-transform: scaley(-1);
    -o-transform: scaley(-1);
    -ms-transform: scaley(-1);
    transform: scaley(-1);
}

.css-reflection::after
{
    background: url("../pages/css3-element-reflections/example/gradient-to-white.svg");
}

/* define the image-specific classes for .css-reflection */
.kitten-01
{
    background: url("../pages/css3-element-reflections/example/images/kitten-01.jpg");
}