Recreating Dabble.in's Homepage in CSS3

A simple but awesome effect

I was recently pointed towards Dabble.in where I, like many others it seems, instantly loved the cool rollover effect.

The first thing I did was inspect element to see how it was done (like pretty much every web developer I know did), and it turns out the effect is incredibly simple. It's mainly CSS3 with a sprinkling of jQuery. Here's how to replicate it, and why (I think) they used jQuery when it isn't actually needed.

The Code

Quite simply, each block is a div; the colour changes instantly when you rollover, and fades out when you rollout. To get this effect, you need to use the CSS3 property transition and its vendor implementations.

Roll over the blocks below to see the effect.

First, you set up your divs:

.fader.red {
    background-color:#ed4e4e;
}

.fader.blue {
    background-color: #7077f9;
}

.fader.light_grey {
    background-color: #a8a8a8;
}

.fader.green {
    background-color: #ddb12c;
}

.fader {
    height: 40px;
    width: 40px;
    float: left;
}

.fader:hover {
    background-color: #606060;
}

These are simply 40x40 divs that float next to each other. I've given them another class to denote what default colour they should have.

Now, to add in the fade when we change the background colour, we need to add the following CSS3 properties to our .fader class:

.fader {
    -webkit-transition:background-color 2s 0.4s ease-out;
    -moz-transition:background-color 2s 0.4s ease-out;
    -o-transition:background-color 2s 0.4s linear;
    transition:background-color 2s 0.4s ease-out;
    height:40px;
    width:40px;
    float:left;
}

The syntax for the transition property is:

property: property to animate (use "all" for any property that changes)

time: length of time the animation lasts

delay: delay before the animation begins

easing: easing type, defaults to linear

The actual command is just transition, but due to the different vendor implementations we need to add the -webkit (Chrome), -moz (Firefox) and -o (Opera) versions for it to work consistently in other browsers. Our divs should now fade when we roll over them!

However, they don't change instantly when we initially rollover, instead we have to wait for the delay and watch them fade in. This isn't what we want!

Luckily, all we have to do is remove the transition property in our :hover statement, like so:

.fader:hover {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    background-color: #606060;
}

Our divs should now change instantly to our new colour, and fade out slowly when we rollout.

You should note that we are only animating the background-color property here. The transition property can animate most CSS properties, including width, height and opacity.

Known Issues

This won't work properly in Opera, which doesn't seem to honour the change in the transition property, so the div will fade on rollover and rollout. And you may have already guessed, but it doesn't work in IE (even in 9).

The use of jQuery

Seeing as you can do all of this in CSS3, why did Dabble use jQuery?

I'm only guessing here, but whilst I was playing around with this it seemed fairly obvious. Unless you like creating hundreds of divs, the only sane way to create them is via a loop in whatever language you prefer, and unless you want to make hundreds of CSS statements with each colour in as a class, it'd be easier to simple add the colour in a style property per div.

However, as soon as you do this, the transition no longer works. The only way to get it to work again is to add the transition properties in the style property as well. Switching them out when rolling over/out via jQuery is the easiest way to duplicate the effect, storing the original colour in an attribute.

In closing

Well, this ended up a lot longer than I expected, and I still left out a lot of things. If there is anything you don't get or I've got wrong, please let me know. Likewise, if you found this useful, please leave a comment!

If you want to read more about the transition property, see CSS3 Files.

Want to let me know what you think of Recreating Dabble.in's Homepage in CSS3? Why not leave a comment, follow me on Twitter , or !

Comments

comments powered by Disqus