Motion blur text scrolling

Play with the controls on the right to adjust the text and effects. Then scroll down the page…

Transform a thumbnail into a lightbox

Click on the thumbnail to make it bigger.

Direction-aware hover effect

Uses JS to identify which direction the cursor is coming from, and then CSS for the animations.

Various other hover effects

Choose from seven different animated hover states.

Sliding boxes – flat design

Thumbnail product details

Hover to reveal more details and expand options. Nicely done. 

A simple vertical menu

Uses CSS3 and Jquery.

A simple slide-out menu

Uses CSS only.

A bunch of lovely checkboxes

Look at them, they’re delightful. And they’re made purely in CSS3. 

Animated check inputs

From a cross to a tick…

Lock switches

Flat design social panel

With a bit of tweaking (a better call to action) this could be good for social sharing / follower growth. 

Loading animation

Everybody hates waiting, but loading animations are tolerated in small doses…

Percentage bars

These could be used to in the style of LinkedIn to show how complete a profile is.

Flat UI log in 

A rather pretty form for signing in, registration and password resetting. 

Flat design – sliders

Drag them left, drag them right…

A countdown timer

This is done on jQuery canvas. When is your next sale going to kick in?

If you like this compliation then you might want to check out my other posts on microscopic attention to detail in UX design, and the A-Z of design principles from the experts.

What other examples have you seen? Do let me know in the comments area below…