Last updated:

HTML5 and CSS3 Experiments

By Vian Esterhuizen

Experimental Learning

To whom it may concern,

I created this page to experiment. A place to increase my knowlege on "the future of the internet". My focus is on learning HTML5 and CSS3.

NOTE: Certain features only work in certain browsers, I have not labelled all of them because at the moment this is an experimental page for me, and not a tutorial page. As I become more knowledgable, I may create tutorials.

Sincerely,

Vian Esterhuizen

P.S. Hover over the icons to the left, to see which elements are compatible with that browser.

P.P.S. The background pattern is actually done with CSS3 gradients.

Using the contenteditable attribute

The content within this <section> is editable.

NOTE: If you are using Firefox, Chrome or Safari; you can drag content from other areas of the page in this section and edit it. Try selecting the title of the page and dragging it into this section. You'll be able to edit the text while still keeping the styles. Try dragging an image and you'll notice that in Firefox you'll be able to manipulate the image.

Using the draggable attribute

5 5 5

Some <canvas> elements

(Javascript & CSS3 effects can only be seen in a browser in which <canvas> has been enabled)

Javascript

A spirograph drawn with Javascript.

(Javascript & CSS3 effects can only be seen in a browser in which <canvas> has been enabled)

CSS3 Transformations

Add a transformation to the canvas.

(Javascript & CSS3 effects can only be seen in a browser in which <canvas> has been enabled)

CSS3 Transitions

And finish with a Transition. Hover over the canvas.

Flip over with rotateY

Calgary International Airport

Image Metadata

Where: Calgary International Airport

When: July 25, 2008

Camera: Canon EOS 30D

Photographer: Vian Esterhuizen

Photo Source

A <video> element

Video Source

columns layout

The end of the world is coming!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu leo sit amet velit scelerisque tristique at non eros. Integer commodo, massa et tincidunt luctus, ante sapien fringilla turpis, ac elementum nisl arcu et felis. Vivamus ante arcu, venenatis non tempor vitae, pellentesque lobortis arcu. Cras auctor tellus ac massa pharetra faucibus. Morbi tincidunt purus urna. Donec luctus, est a egestas consequat, libero ipsum pulvinar augue, eget condimentum erat urna id ligula. Donec a augue sit amet lorem rutrum mattis. Proin et nibh tristique purus consequat tristique eu id nisi. Integer nec auctor libero. Aliquam fringilla eleifend hendrerit. Vivamus sed dolor tortor. Nullam vulputate ultrices urna vitae sollicitudin. Proin leo urna, mattis et mollis a, iaculis sit amet lacus.

Suspendisse hendrerit auctor luctus. Pellentesque auctor posuere diam, ac bibendum arcu iaculis sed. Nunc vitae lobortis sem. Donec laoreet sem a elit fringilla posuere. Curabitur lobortis congue scelerisque. Suspendisse potenti. Praesent fringilla sem tempus purus tincidunt tristique a imperdiet felis. Phasellus sagittis placerat enim vel aliquet. Mauris orci odio, iaculis vel malesuada quis, congue at turpis. Fusce eget volutpat metus. Nulla molestie vehicula consectetur. Duis porta posuere arcu id congue. Vestibulum fermentum mi tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat, orci eu mollis dapibus, est nibh congue lacus, et accumsan lacus turpis id erat.

Nulla leo dui, semper eget ultrices sit amet, luctus non risus. Nulla fringilla, justo a varius volutpat, risus ipsum suscipit urna, at rhoncus eros diam non odio. Aliquam pellentesque consectetur urna, viverra gravida felis vehicula iaculis. Aenean vitae nisi dolor. Sed facilisis diam in nunc ultrices porttitor. Aliquam erat volutpat. Aliquam sit amet nisi quis lorem molestie varius. Aliquam et mi sit amet orci auctor pulvinar. Nam scelerisque interdum lobortis. In hac habitasse platea dictumst. Donec neque diam, interdum sed tempus nec, tempor sit amet enim. Sed sem urna, hendrerit ac vehicula at, ultrices vel sapien. Ut vitae lectus arcu. Suspendisse vel velit velit. Aenean velit nunc, facilisis quis aliquet non, iaculis non lacus. Praesent elementum ultricies enim, vitae commodo nibh feugiat et. Nulla sit amet ipsum nisl, hendrerit dapibus mi. Aliquam id dolor ac metus dictum suscipit ac scelerisque ligula. Etiam scelerisque turpis quis dui feugiat ac ornare urna fermentum. Vestibulum placerat nisi a ante lacinia tempor imperdiet leo interdum.