Tag Archives: tutorial

Pseudo elements with custom attributes to create a css3 menu that will bounce

Pseudo elements with custom attributes to create a css3 menu that will bounce

You must have already seen this (what I call “bouncing”) hover effect in navigation menus. Curious how to recreate it easily ?
Below you’ll find my approach.
It’s pure css, I use an “::after” pseudo-element with a custom attribute.

... more

Create your portfolio gallery using html5 canvas – tutorial

Create your portfolio gallery using html5 canvas – tutorial

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. See the demo and try the hover effect. The grayscale “copies” of our images are created with canvas and we use pure css3 for the smooth change.

... more

Create a fancy responsive image-on-hover effect

Create a fancy responsive image-on-hover effect

In this tutorial we will create a fancy image on hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively.

... more

Intriguing animate-on-scroll effect – jQuery tutorial

Intriguing animate-on-scroll effect – jQuery tutorial

I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website.
In this tutorial we try to recreate the intriguing scrolling effect.

... more

postcard from Paris – css3 keyframes animations in use

postcard from Paris – css3 keyframes animations in use

I decided to explore the area of css3 keyframes animations. We are going to create a sort of virtual postcard. Greetings from Paris !

... more

illustrator tutorial: create a 6-egg box (not necessarily for Easter)

illustrator tutorial: create a 6-egg box (not necessarily for Easter)

In this tutorial you will learn how to create a 6-egg box (full of eggs). We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

... more

illustrator tutorial: create a seamless folk pattern

illustrator tutorial: create a seamless folk pattern

In this tutorial you will learn how to create a seamless pattern composed of simple folk-flavored flowers. In the first part we will create an individual flower. In the second we will focus on constructing a pattern and define a seamless Illustrator pattern swatch.

... more