Chris Taylor Design

Seeing things like the famous CSS Parallax effect on Clear Left’s Silverback App website was a bit of a watershed moment for me in thinking beyond what you can do with CSS to what you could do. I’ve cheekily used the effect on my homepage (scroll to the top and try resizing the browser window…ooh clever eh?).

But pioneers like Paul Annett aren’t the only ones who are pushing the boundries of what’s possible with CSS.   Below I’ve listed 5 experiments which, whilst not always practically useful, nevertheless showcase their designers’ imagination.

1. The CSS Maze

A purely CSS Maze game, a little buggy but impressive.

Via: http://www.cssplay.co.uk/menu/amazing

2. The CSS 3D Puzzle

Another puzzle game but the attention to detail is amazing.

Via: http://www.cssplay.co.uk/menu/three_d#no

3. The CSS Scaled background image

A very useful trick in which the background image scales according to the browser window. This one actually would have some practical uses particularly in liquid or fluid layouts.

Via: http://www.markschenk.com/cssexp/background/scaledbgimage.html

4. The CSS Snooker Table

An example of CSS ‘Art‘ this snooker table is made with creative use of bullets and borders.

Via: http://ago.tanfa.co.uk/css/borders/snooker-table.html

5. The CSS Horse in Motion Illusion

This one did the rounds on twitter a while ago – an optical illusion of a horse running. Resize the browser window to see the effect.

Via: http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html

Know of any more cool css tricks or experiments? Share them in the comments below.