Here’s the HTML code:

<div id="background_gears">
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
</div>

<div id="home">
<figure>
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
<h2><a data-title="Comparto Web">Comparto Web</a></h2>
</figure>
<div>

To animate the two gears I used CSS3 animations:

.big_gear{
	position: absolute;
	opacity: 0.85;
	width: 7.6em;
	top: -3.0em;
	right: -2.7em;
	animation-name: clockwise;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.small_gear{
	opacity: 0.8;
	position: absolute;
	width: 4em;
	bottom: 0.2em;
	left: -0.8em;
	animation-name: counterclockwise;
	animation-duration: 12.808s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes clockwise{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

@keyframes counterclockwise{
	from{
		transform: rotate(360deg);
	}
	to{
		transform: rotate(0deg);
	}
}

and to create a text inset shadow effect I followed this beautiful example from Daniel Hug found on Dabblet.

You can check the result simply by visiting http://www.compartoweb.com

Here’s an example:

input:required + label:after {
  content: ' *';
  color: black;
}

By this way you are able to dynamically append the classic ‘*’ to the labels that belongs to input tags with the required flag. Obviously you have to put the label after the input tag but then you can revert this structure by using some CSS float instructions.

Here’s the running example:

I used some of the amazing CSS 3D transformations to archieve this effect under WebKit based browsers. Here’s a snippet from the page:

 
  #container{
     margin: 0 auto;
     width: 100%;
     height: 90%;
     max-width: 1024px;
     -webkit-transform-style: preserve-3d;
     -webkit-perspective: 900;
     -webkit-perspective-origin: 100% 30%;
  }

The container, which is the div that hold the rest of the elements, has some -webkit-* experimental properties that set the position and the distance of the point of view of the user from the scene, as much as it happens with 3D software.

After this each card needs to be rotated against its Y axes; here comes to rescue another CSS3 property:

  .card{
     -webkit-transform: rotateY( 120deg);
  }

Then, all you need is find a way to trigger a change of CSS properties in your .card elements while specifying a transition which handles this change smoothly. So first let’s add this transition:

  .card{
     -webkit-transition: all 1s ease-out;
  }

And then let’s use the :target pseudoclass which gets applied to an <a> element when its name became part of the URL (either because clicked or typed):

  .card:target{
    -webkit-transform: rotateY( 0deg);
  }

The trickiest part is then try to make this thing works also under Firefox which doesn’t have 3D transformations. It turns out that you can emulate them by using wisely the skew(xdeg, ydeg) transform, so you can do the following:

  .card{
     -moz-transform: skew(0deg,-35deg) scale(0.70);
  }
  .card:target{
     -moz-transform: skew(0deg,0deg) scale(1);
  }

Good, but now there’s another challenge: how to solve this ?

The elements on the right side of the selected one have two issues: they should be inclined on the opposite angle and the way they overlap each other should also be reversed.

To solve the first part we can rely on the ~ selector to tell the browser that each element following the selected one must obey to a different skew angle:

  .card:target ~ .card{
    -moz-transform: skew(0deg,20deg) scale(0.70);
  }

The only solution I found to archive the second issue is to use the + selector iteratively in order to assign a z-index to an element based on its distance from the selected one:

  .card:target + .card{
    z-index: 10;
  }

  .card:target + .card + .card{
    z-index: 9;
  }

  .card:target + .card + .card + .card {
    z-index: 8;
  }

  .card:target + .card + .card + .card + .card{
    z-index: 7;
  }

  .card:target + .card + .card + .card + .card + .card{
    z-index: 6;
  }

  .card:target + .card + .card + .card + .card + .card + .card{
    z-index: 5;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card{
    z-index: 4;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 3;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 2;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 1;
  }

Here’s the final result:

You can have a working demo at this address:
http://sandropaganotti.com/wp-content/goodies/demos/cards/index.html#aela

To archive such effect I used CSS3 3d properties, in particular the ‘rotate3d‘ one; here’s the portion of html used to define the picture: three divs have been used as layers with ‘preserve3d’ and ‘translateZ’ to specify the distance between each of them:

<div style="position: absolute; top: 50%; left:50%; margin-left: -350px; margin-top: -233px;
            -webkit-perspective: 1000;" >
  <div id="picture" style="height: 466px;
          width: 699px;
          -webkit-transform-style: preserve-3d;
          background: url('flowers.png') no-repeat;
          ">
          <div style="width: 377px;
                height: 424px; background: url('body.png') no-repeat;
                position: absolute;
                -webkit-transform: translateZ(20px);
                top: 45px; left: 75px;">
          </div>
          <div style="position: absolute;
          -webkit-transform: translateZ(30px);
          bottom: 0px; right: 0px; padding-left: 30px; padding-right: 30px;
          background: rgba(0,0,0,0.6);     font-family: 'Lobster', arial, serif;
          color: #FFF; font-size: 30px; line-height: 60px; text-align:center;">
            Francy taking pictures
          </div>
  </div>
</div>

Next I wrote a small JQuery flavored Javascript to rotate the ‘layer0′ div according to mouse position; the other two divs follows the rotation of the first automatically preserving the 3D spatial relations.

$(document).ready(function() {
    $('body').mousemove(function(event) {
        cx = Math.ceil($('body').width() / 2.0);
        cy = Math.ceil($('body').height() / 2.0);
        dx = event.pageX - cx;
        dy = event.pageY - cy;

        tiltx = (dy / cy);
        tilty = - (dx / cx);
        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
        degree = (radius * 20);

        $('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
    });
});

And that’s all; you can try the demo at this link: Parallax Gallery, please note that only works on Safari; here’s a screenshot of the effect in action:

update 19/06/2010: my speakers showcase gets a dedicated post at euruko2010 official blog from Ela. Thanks guys !

Euruko 2010 is over. It was a great week-end spent among cool people having fun and talking about Ruby. As Matz said “we have a nice community”, and that’s absolutely true. To honor this conference (and to test some CSS3 features ^_^ ) I’ve developed a page showcasing the speakers and their talks. For each of them you may find a short summary and some resources (slide, etc..).

Working with CSS3 highlight some browser performances problem I was unaware before, for example I tried to have a scrolling background under a shadowed box, you can try this in your browser and notice how it is slow. However if we turn the shadows off the scrolling become smooth again (try this).

Ok, nothing left to say, hope you’ll enjoy the showcase: