Drawing arbitrary elements as backgrounds with -moz-element

by Tom Kenny (@tkenny)

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/

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.