Placed in: Home arrow Programming arrow CSS arrow Experimenting with the element() CSS function viagra australia
viagra online
viagra sale
cialis online
cialis australia
Experimenting with the element() CSS function

Just like I said in my previous article; Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Next to the :any() CSS selector, another cool CSS feature was added to the Gecko engine that I wanted to check out, and is called the element() function.

Experimenting with the element() CSS function

According to the specification, this function does the following: Starting in Gecko 2.0, you can use the element() CSS function to use an arbitrary HTML element as a background image for background and background-image. That sounds pretty interesting! Take note this only works in the latest version from Firefox, and still needs the -moz- vendor prefix (so the complete function call will be -moz-element()).

Demo element() experiment   Download element() experiment

You can directly view the source from the demo to check what kind of small experiments (or checking out some bad practices) I did, but I would recommend you to read why the experiments are interesting.

What to know

Here are some interesting things to know about the function (all according to the spec):

  • A particularly useful scenario for using this would be to render an image in an HTML5 <canvas>, then use that as a background.
  • You can use the document.mozSetImageElement() method to change the element being used as the background for a given CSS background element.
  • Syntax: -moz-element(id), where id: The ID of an element to use as the background, specified using the syntax "#id".

Now that we know that, we can start off having some fun with this function. Let's see how it goes!

Experiment #1: The basics

First, we'll need to check how and if this functionality actually works, so we'll start off with a basic example. This is the code we'll need.

HTML

 
<div id="exp1container">
   <p>This is the container for the first experiment.</p>
</div>
<div id="exp1clone">
   <!-- Empty -->
</div>
 
#exp1container {
   height:50px; background:-moz-element(#exp1clone); }
#exp1clone {
   width:50px; height:50px; background-color:orange; }

CSS

As you can see, the #exp1container doesn't have any background-color itself, but uses the #exp1clone as it's background. Since the other element does have a background-color, we would expect the container to have it as well.

Experiment 1

Awesome - seems to work! Take note that - by default - it automatically repeats the pattern (just like with background images). Now that we know the functionality works, let's see if we can do more with it.

Experiment #2: Filled clone

The previous example had an empty clone, so I was wondering what it would produce if the clone would be filled (for example, with text and an image). I used the following code for that:

HTML

 
<div id="exp2container">
   <p>This is the container for the second experiment.</p>
</div>
<div id="exp2clone">
   <p>This clone has some text & an image <img src="images/clone.png" alt="Clone" />.</p>
</div>
 
#exp2container {
   height:50px; background:-moz-element(#exp2clone); font-weight:bold; color:white; }
#exp2clone {
   width:150px; height:50px; background-color:orange; }

CSS

As you can see, I changed the font and color properties a bit, otherwise it wouldn't be readable at all, since it does work! More amazingly, it's a true clone; When you select the text, the background from the container will get selected as well.

Experiment 2

I was pretty stunned by that fact. Let's see what more we can do!

Experiment #3: Clone checkbox

Next, I wanted to see what kind of events could be triggered as well. I took simple HTML form element (a checkbox), applied it as the background, and checked it. This is the code:

HTML

 
<div id="exp3container">
   <p>This is the container for the third experiment.</p>
</div>
<div>
   <p>Check this checkbox: <input type="checkbox" id="exp3clone" /></p>
</div>
 
#exp3container {
   background:-moz-element(#exp3clone); }

CSS

And, as you could have guessed: This seems to work as well. Checkboxes everywhere!

Experiment 3

Experiment #4: CSS properties

Next up was the question what would happen if you would dynamically change some CSS properties using jQuery. I took the first example, and when hovering the clone, it should change the colour (using jQuery). Would the background from the container change as well?

HTML

 
<div id="exp4container">
   <p>This is the container for the fourth experiment.</p>
</div>
<div id="exp4clone">
   <!-- Empty -->
</div>
 
#exp4container {
   height:50px; background:-moz-element(#exp4clone); }
#exp4clone {
   width:50px; height:50px; background-color:orange; }

CSS

 
$("#exp4clone").hover(function() {
   $(this).css("background-color", "red");
}, function() {
   $(this).css("background-color", "orange");
});

JavaScript

And when hovering the clone, this is the result:

Experiment 4

Yup, that also seems to work! But what if we didn't change the actual element, but subscribe to an event of the element?

Experiment #5: CSS properties

So, changing the actual element works, but what if we bind it to the :hover pseudo selector? It might be another selector (since the -moz-element doesn't specifically bind to the :hover event), so let's see how far it goes.

HTML

 
<div id="exp5container">
   <p>This is the container for the fifth experiment.</p>
</div>
<div id="exp5clone" class="left">
   <!-- Empty -->
</div>
 
#exp5container {
   height:50px; background:-moz-element(#exp5clone); }
#exp5clone {
   width:50px; height:50px; background-color:orange; }
#exp5clone:hover {
   background-color:red; }

CSS

And, when hovering, this is the result:

Experiment 5

So far, everything seems to be working just fine: Even the CSS events will be applied correct.

Experiment #6: Body ID

So yeah, small boxes with ID's can be pretty fun, but what if a huge HTML element will be applied to the background? In this example, I added an ID to the body element and applied that as the background.

HTML

 
<body id="body">
   <!-- All the HTML -->
 
   <div id="exp6container">
      <p>This is the container for the sixth experiment.</p>
   </div>
</body>
 
#exp6container {
   background:-moz-element(#body); }

CSS

What's especially strange about this example, is that a child actually places a parent as their background. That's not supposed to work, right? Actually, it does.

Experiment 6

It has some funny resizing issues as well, since it's a replication of the actual body element. I assume you can even make a parallax out of that!

Experiment #7: Border image

I was really amazed by what does function could do. But, I was wondering if we could take it one level deeper and try something that isn't in the specifications. Firefox also supports the CSS3 border-image property: Let's see if we can use the element() function for that as well.

HTML

 
<div id="exp7container">
   <p>This is the container for the seventh experiment.</p>
</div>
<div id="exp7clone">
   <img src="images/clone.png" alt="Clone" />
</div>
 
#exp7container {
   -moz-border-image: -moz-element(#exp7clone) 0 16 0 16 stretch stretch; }

CSS

So, instead of calling the usual url() function, the element() function is used. This was the result:

Experiment 7

As you can see, no border is applied. Bummer! Maybe it can be added later, could be useful.

Experiment #8: CSS animation

The CSS3 transition property allows us to create some nifty CSS animation, which has been added to Firefox 4 as well. Let's see what happens to the background when the clone will animate.

HTML

 
<div id="exp8container">
   <p>This is the container for the eight experiment.</p>
</div>
<div id="exp8clone">
   <!-- Empty -->
</div>
 
#exp8container {
   height:50px; background:-moz-element(#exp8clone); }
#exp8clone {
   width:50px; height:50px; background-color:orange; -moz-transition-duration: 1s; }
#exp8clone:hover {
   background-color:red; -moz-transform: rotate(350deg) scale(0.8) rotate(-30deg); }

CSS

As you can see, when hovering the clone, it should rotate, scale and the colour should change. What will happen to the container?

Experiment 8

Yup: the animation will be played several times next to each other! Looks pretty funny, but I was more impressed by the fact that this one works fine too.

Experiment #9: Pseudo elements

We already checked the CSS :hover event, but I was wondering if other pseudo elements would work as well. For this example, I took the :before and :after elements and applied something to the content. Let's see the code:

HTML

 
<div id="exp9container">
   <p>This is the container for the nineth experiment.</p>
</div>
<div id="exp9clone">
   <!-- Empty -->
</div>
 
#exp9container {
   height:50px; background:-moz-element(#exp9clone); font-weight:bold; color:white; }
#exp9clone {
   width:50px; height:50px; background-color:orange; }
#exp9clone:before {
   content:":before"; }
#exp9clone:after {
   content:":after"; }

CSS

Which gives us the following result:

Experiment 9

Yup, even the pseudo elements seem to work great!

Experiment #10: Canvas element

Like I said in the beginning of the article: According to the spec, this could be really useful in combination with the canvas element, since it can dynamically draw things. Of course, we'll need to test that as well, so I added a canvas element with some simple drawings when you hover it. Here's the code:

HTML

 
<div id="exp10container">
   <p>This is the container for the tenth experiment.</p>
</div>
<canvas id="exp10clone" width="50" height="50" class="left"></canvas>
 
#exp10container {
   height:50px; background:-moz-element(#exp10clone); }
#exp10clone {
   background-color:orange; }

CSS

Dive into the source code to see how the canvas is filled with several other rectangles. And - as expected - this will give us the following result:

Experiment 10

Cool! Fully as expected - look like the element() function is working fine!

What do you think?

What do you think of this function? Where could it be useful? And can you come up with more interesting experiments (for example, with videos?), that might even produce some weird/funny behaviour? Feel free to share!


Tags:  element css function firefox background

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
 
< Prev   Next >
Subscribe

Subscribe to Marcofolio