Dynamic Blox

A Web Design Resourse

Breadcrumb Section

CSS Nav-Efx

May, 01, 2012 | CSS

The first time I read about CSS3 and all of the new capabilities it featured, the possibilities alone left me scratching my head. I was anxious, excited and perplexed all in the same breath. The excitement was brief thanks to the lack of browser support in the very beginning and some more BS I don’t care to get into. Unlike HTML5, CSS3 caught on much faster.   We no longer had to slice images to create rounded corners and drop shadows. Nor, did we have to use inventive hacks that bloated our code just to implement those simple features. Due to these new discoveries in CSS3, I present you with CSS Nav-Efx.

Unfortunately, the really cool stuff like animations and flex-box did not catch on so fast. A few days ago, I came across an example by Jordan Moore that featured flex-box and it inspired me.  The actual article is based on content choreography by Trent Walton. I came across other designers and developers that implemented something similar, but it was not quite the same.

A month ago I came across a similar feature at one of my favorite blogs [codrops] that did not use any Javascript. Once again I was inspired, but place it aside for other projects I was working on.  All of that changed once I had some free time and  came across Jordan Moore’s example. I quickly went to work on a multitude of possibilities and came up with some examples you can view by clicking here. If this amuses you, the zip file is also available for download.