CSS Only Web Goodies

We are a few days from Christmas and at CERN we are preparing for our christmas issues of various posts and websites. What a better way to celebrate with some nice animations! (And what a nice opportunity to explore CSS and it's powerful new features!)

I liked how our websites came out, and therefore I decided to share with you my code. If you want to jump-in directly to the examples, click here : http://wavesoft.github.io/web-goodies

Christmas Presents

Christmas is all about presets! And since for our first special issue, we wanted to show a different story for each one of the contributors, what a better way to show them as in a christmas present!

Our original idea was to have a box with a number, counting down to christmas. Each box will have a letter inside, that will be shown to the user when the mouse is moved over.

Story Boxes

Having a look on the latest CSS3 3D transformations, I figured out that the simplest we could do is to form a cube with 3D transformations. This means creating one face for each side, plus one face for the card.

However, when I had a quick look, I realised that it looks better if I have another texture from within the box. That said, too many faces needs to be created... time for javascript!

The following function takes care of creating our faces:

    // Iterate over sides and faces
    var sides = ['f','b'];
    var faces = ['fr','bk','rt','lt', 'bt'];
    // First over sides...
    for (s=0;s < sides.length;s++){
        // Then over faces..
        for (f=0;f < faces.length;f++){
            var face = document.createElement('figure');
            face.className = sides[s] + ' ' + faces[f];
            // Also create a number item on the front face
            if ((s==0) && (f==0) && (faceText!=null)) {
                var num = document.createElement('div');
                num.className = 'num';
                num.innerHTML = faceText;

With a bit of a CSS magic that I am not going to go into details right now (but you are free to browse it yourself) the christmas magic comes to life!

Even though we are using javascript to set-up our scene, the animation and transitions are pure CSS.

You can have a look on the first example here.


For our other issue, we wanted to have a nice background animation with some winter theme. However, again I wanted to avoid adding any javascript logic.

The solution came this time using a simple CSS keyframe animation over a predefined path. Initially, I thought that something like this might look quite bad, however if you use many snowflakes and you use a different starting time for each one, you can have a very nice, winter-y animation!

You can have a look on the second example here.