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 Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

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