element() CSS functionExperiments

Marcofolio.net

This page contains several experiments with the CSS element() function. Take note this only works on Firefox 4+, and read the article for an in-depth explanation.

Experiment #1: The basics

This is the container for the first experiment.

Experiment #2: Filled clone

This is the container for the second experiment.

This clone has some text & an image Clone.

The box to the left is truely a clone: Try selecting the text to find out.

Experiment #3: Clone checkbox

This is the container for the third experiment.

Check this checkbox:

Experiment #4: CSS properties

This is the container for the fourth experiment.

Hover the box left. The CSS properties are applied using jQuery.

Experiment #5: CSS properties

This is the container for the fifth experiment.

Hover the box left. The CSS properties are now applied using CSS.

Experiment #6: Body ID

This is the container for the sixth experiment.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at lacus commodo vitae vulputate nulla sagittis. Nam lobortis ullamcorper dictum. Fusce faucibus est a metus euismod hendrerit. Phasellus non dui leo. Fusce id pretium ligula. Cras semper imperdiet consequat. Vestibulum eget sem nisl. In ac erat diam. Phasellus tempor interdum purus, vel tincidunt nulla pretium sit amet. Nam in leo eu velit commodo aliquet nec a ante. Proin a arcu eu erat scelerisque porttitor a quis elit. Vivamus pharetra iaculis quam a vulputate. Mauris erat enim, dignissim ut mattis vitae, rhoncus et tortor. Curabitur auctor mattis urna, a vehicula arcu interdum ut. Duis ultrices condimentum ornare. Curabitur in dignissim enim. Etiam et metus augue, quis accumsan nisl.

Try resizing your browser to see a nifty effect.

Experiment #7: Border image

This is the container for the seventh experiment.

Clone

As you can see, this one doesn't seem to work.

Experiment #8: CSS animation

This is the container for the eight experiment.

Hover the box left. A CSS animation will start.

Experiment #9: Pseudo elements

This is the container for the nineth experiment.

Experiment #10: Canvas element

This is the container for the tenth experiment.

Hover the canvas element to the left, to see a canvas drawing.