Category: Tutorials

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, for a simple 1-level menu as well as a drop-down one.
It’s pure css, I use an :after pseudo-element with a custom attribute.
Make sure you’re using a modern browser (support for css3 transitions is required) and click on the image below to see the demo.

Note that I added a data-title attribute containing the link label to each a.
The idea is to have a li element with overflow:hidden. The first on-hover effect is to change its background color and add some inner shadow with a smooth transition (don’t forget the vendor prefixes !).

With :after pseudo element I generate a “copy” of the link element, that is positioned below the link. For its content I use the “data-title” attribute.
On mouse-hover the link changes its margin-top property (again, with a smooth transition).

First of all, if you are not using sass/compass yet – you definitely should start right now. There are plenty of resources on how to install compass on mac or PC. Myself, I’m using a mac app “Codekit”.
One of the of compass features that are especially compelling is “spriting”. With compass you simply place all your images in a folder and import them into your stylesheet.
In this post I’ll share with how I prepare my sprites in two “versions” for standard and retina display.
Click on the image below to see the demo (check it on your retina display).

Example 1 – button

Let’s prepare a button with three states normal, hover and target. I prepare the three states of buttons in two sizes (normal and doubled for retina display). I save the separate .pngs in two folders : button and button2x.
The button folder will contain : button.png, button-hover.png and button-target.png. Identically button2x will contain : button.png, button-hover.png and button-target.png.

You can create and work with sprites compass in two ways. The first one would be the import-based approach :@import "button/*.png"; @include all-button-sprites;
You can also specify a configurable variable before importing the sprite.

Still in the “shopping” theme (see my previous post) this time I prepared a simply illustration: a beautiful girl doing her shopping with Paris roofs and Eiffel Tower in the background. Created in Adobe Illustrator CS5 back saved to CS4 version.
What do you think ? – it’s my first time with human body (I mean in vector ;)) so I’d really appreciate your feedback.

It’s free for personal and commercial use. Enjoy your shopping.

If you host this file please don’t forget to add a link to this site.
And if you like/use it please bookmark and share. Thank you.

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 the images are created with canvas and we use pure css3 for the smooth changes.

We will use 300px x 300px images. The main containing element #wrap is centered up (margin: 0 auto) and given the width of 1020px (=340 x 3).
The list items are given float : left and are positioned relatively. The image title is wrapped in a div element that slides up on hover. To achieve a smooth effect we apply a css3 transition.
(Note that for the simplicity of this tutorial I don’t use any vendor prefixes. Therefore, you’ll find them in the source file to download).

Step 3: Canvas

Now, we will make use of the html5 canvas element to draw the grayscale versions of our images. Below you’ll find a createCanvas custom function that creates a canvas element, takes a copy of an image, performs the conversion and draws it to the canvas and finally inserts the canvas to the DOM where desired. With .each() method the createCanvas function is iterated across all images within the #gallery list.

And that’s it ! This example will not work in Internet Explorer versions below 9. You could provide an alternative solution using grayscale filter and adding some jQuery to recreate the transition effect on hover – but this part is not covered in this tutorial.

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.

The main containing element #wrap is centered up and given the specific width 865 px = 845px (image size) + 2x10px (borders size).
The div that contains the images is given position:relative (to properly position the two versions of the image) and overflow hidden (we will size up and rotate our images and we want to hide the exceeding parts).

The img element is positioned relatively, the colored version (.onhover) is given 0 opacity and absolute position. When the containing div is being hovered over the opacity of .onhover element changes to 1. To make the transition smooth we apply the transition property to img. (For simplicity I decided to omit all vendor prefixes).

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. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration.

The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap.
The stylesheet begins with a simple css reset and the @font-face declaration

Right now, the important point is to set width : 100% and overflow-x: hidden for the #wrap_out. The #wrap element centers the content of the page.section is positioned relatively and the animated herbs (class="element") are positioned absolutely.
Let’s continue with our stylesheet :

The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. We want the #separation to stay there when the window is resized but to move up when we start to scroll down. A possible way to do that is to make the height of the header element dependent on the height of the window browser :

To animate the .element we’ll go simple and use a linear function to move it from its initial position to its target position. We assign four parameters (its initial and final coordinates) to each element :

move is a function of the scroll value and has two parameters : initial (p0) and final (p1) position of an element.
Before we start scrolling, s = 0, move is equeal to p0. When scroll reaches s_max, the value of move is p1. The min operator prevents further movement.
As I said this is one of the simplest possible solutions.
What is s_max ? I wanted the animation to finish once the elements are verticaly centered in the middle of the window (I’m not pixel perfect here).
Where is that point ? Imagine that we don’t animate our elements and that they are in their final positions. Notice that we have to scroll down 500px (see the scheme below), to see the top of the second row of our herbs. If we scroll down a half height of a window more we will see them in the middle.
We want to be sure that the page is high enough so that the elements could reach their final positions. To assure that we will make the property height of section dependent on the height of the browser window, in this case we need to scroll $(window).height/2 + 500. We have 240px above the section (120px + 120px). The minimum height of section is then $(window).height/2 + 260. We add a line to the init function

The idea is to use the sparkling animation to turn out and in the #sparkling1 and #sparkling2 elements within the 0.4s cycle, with the first in/out when the second is out/in. To achieve that we will delay the sparkling animation of 0.2s on #sparkling1.

In Paris this beautiful evening spectacle may be seen for several minutes every full hour. We will use the #eiffel_wrap element and eiffel_wrap animation to recreate this effect (not literarily though – I will not make you wait an hour long).