The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events.

For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills.

Step 1

The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator

Step 2

Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article"

Step 3

Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions.

Step 4

Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do:

  • #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally.
  • #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated.
  • #centerflip will behave like the #cover but the origin will be right instead of left.
  • #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right.

Here's the full CSS code

Step 5

Now that you have the cards and the layout positioned, let's use Javascript to make the behaviors. We will use jQuery and jQuery Transit for that. jQuery Transit is an amazing plugin that allows us to make simple CSS animations with jQuery.

The easiest way to write the script is understand exactly the logic/behavior we want to have

  • User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg
  • The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg.
  • Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again.

Here's the code for that

Conclusion

This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general.

View Demo

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.