A new version of Inspect Element is coming soon! Subscribe to the newsletter for updates. Subscribe

Drawing arbitrary elements as backgrounds with -moz-element

Very interesting and innovative new CSS background implementation proposed by Mozilla for use in Firefox 4. Basically you can use any element via it’s ID as easily as this:

background: -moz-element(#yourelement);

It works with any HTML element even <iframe> or <video>. Make sure you download the Firefox 4 Beta and check out some of the demos, especially the animated water ripple reflection and the video demo. Both demos are probably a little over the top but certainly demonstrate the implementation effectively. Hopefully other browsers will pick this up and implement it too.

Source: http://hacks.mozilla.org/2010/08/mozelement/

by @tkenny

You should follow me on Twitter here


Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: