Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.