comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
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 According to the specification, this function does the following: Starting in Gecko 2.0, you can use the 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):
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. <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; } As you can see, the 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: <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; } As you can see, I changed the 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: <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); } And, as you could have guessed: This seems to work as well. Checkboxes everywhere! 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? <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; } $("#exp4clone").hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "orange"); }); And when hovering the clone, this is the result: 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 <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; } And, when hovering, this is the result: 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 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); } 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. It has some funny resizing issues as well, since it's a replication of the actual 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 <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; } So, instead of calling the usual As you can see, no border is applied. Bummer! Maybe it can be added later, could be useful. Experiment #8: CSS animation The CSS3 <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); } As you can see, when hovering the clone, it should rotate, scale and the colour should change. What will happen to the container? 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 <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"; } Which gives us the following result: 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 <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; } 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: Cool! Fully as expected - look like the 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 |
Next > |
---|
Search |
---|
Or try the sitemap |