Using CSS3 to add reflection to an iframe

Mozilla just landed a really cool new extension to the CSS background-image property in the Firefox 4 nightlies. The new extension allows you to use arbitrary DOM elements as background images. The syntax looks like this:

#iWantBackground {
    background: -moz-element(#sourceElementID);
}

-moz-element lets you use virtually any element as a background, including iframes and canvas elements. I wanted to play around with it a bit, so I hacked a quick demo of an iframe with a live-updating reflection. It borrows heavily from the code in this excellent article.

Demo
(Works in Firefox 4)

I know that lots of my readers aren’t running the latest Firefox nightly, so here’s a screenshot of what the reflection effect looks like:

Here’s the code I wrote:

    <style type="text/css" media="screen">

        body {
            background: #000;
        }

        #main {
            margin: 30px auto 0 auto;
            width: 800px;
        }

        #source {
            display: block;
            width: 800px;
            height: 480px;
            border: 0;
        }

        #reflection {
            margin-top: 5px;
            background: -moz-element(#source) bottom left no-repeat;
            -moz-transform: scaleY(-1);
            height: 200px;
            border: 0;
            mask: url(#reflection-mask);
        }

    </style>

    <div id="main">
        <iframe id="source" src="http://en.wikipedia.org/wiki/Color"></iframe>
        <div id="reflection"></div>
    </div>

    <!-- SVG from http://hacks.mozilla.org/2010/08/mozelement/ -->
    <svg>
      <mask id="reflection-mask" maskContentUnits="objectBoundingBox">
        <rect x="-0.1" width="1.2" height="1" fill="url(#reflection-gradient)"/>

      </mask>
      <linearGradient id="reflection-gradient" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop stop-color="white" stop-opacity="0.6" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="100%"/>
      </linearGradient>
    </svg> 

Also, I decided to add a new hacks section to my blog to keep track of all the random code I write.

You should share this with your friends: