A few months ago, I attended a small conference-like event, which looked promising, but ended up being a disappointment. There is no need to name the specific event, since the point of this article is not to bad-mouth someone, but instead to give some recommendations to potential event organisers out there, from the perspective of an attendee.

While playing around with some CSS3 transitions for an image gallery representation, I ended up creating a menu that I really liked, so I decided to write a tutorial around it. Have a look at the demo (or this pen) to see what we’re going to create. After building the horizontal version, it’s very easy to create a vertical menu as well. But we’ll get to that.

The other day, I saw a photograph in a printed magazine which inspired me to create a JavaScript effect that would make any photo look exactly like that. After I created this effect, I altered the code into a proper transition effect to be used as a slideshow, using multiple images. I am now going to walk you through how it was built.

I still remember the day when I discovered that there is a JavaScript console where I could display messages! It was such a relief not having to alert messages anymore, or using a DOM element to display them. But, what I didn’t know back then was that there are different ways to display messages in the console, apart from the well-known log() method.