HTML5, CSS3 & JS Experiments

By Martin Ivanov

Crossbrowser Reflections


If you are interested in the exciting technology of HTML5 Web Components you may want to check a similar experiment, wrapped as a reusable custom tag.

Usage and Code Insight

            <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>
    position: relative;
    width: 192px;
    height: 192px;

    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;

    border: inherit;
    background: inherit;
    -moz-transform: scaley(-1);
    -webkit-transform: scaley(-1);
    -o-transform: scaley(-1);
    -ms-transform: scaley(-1);
    transform: scaley(-1);

    background: url("../pages/css3-element-reflections/example/gradient-to-white.svg");

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

The gradient-to-white.svg File


Please, disable your ad blocker

This website is made possible by displaying online advertisements to the visitors. To view the content, please, disable your ad blocker, then refresh the page.