New interactive demo's

22 October 2012

I've added some awesome new functionality to this website which enables me to make inline interactive demo's. My experience is that fiddling around with css attribute values and options makes it much more fun to understanding new CSS attributes and their possibilities.

Therefor I have created a new option in this website to let me add interactive demo's to the content, without writing custom pages, in the regular markup language I use for this site. This is how this looks like:

<div id="perspective1">
  <h1>Hello World!</h1>
body {
  background: ;
#perspective1 {
  width: px;
  transform: rotate(deg);
#perspective1 h1 {
  font-size: px;

Hello World!

Change the values in the form fields and see what happens (the 3D transforms only work in FF and Chrome, IE and Opera fallback to the regular rotate).

All I need to do to insert a demo like this is add these lines to the content:

    CSS styles applied to the demo
    HTML used for the demo

Selectable values, ranges and default values are defined like this:

// a value range is set by using slashes. First two values are min and max, third is the step interval and fourth value is the default value

transform: rotateX(*0/180/10/30*deg);

// a selectlist with values is set by using comma's. The default value is prefixed with the > character

background: *blue,hotpink,>yellow,green*;

I also added Lea Verou's PrefixFree plugin to the site to prefix the non-standard properties with their appropriate vendor prefix. This also happens when changing the values.

Pretty awesome, eh? :)
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!