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
.
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.
Experiment #5: CSS properties
This is the container for the fifth experiment.
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.
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.