Animated List With Target

This experiment was inspired by an article written by Chris Coyer from css-tricks.com. But i decide to make the experiment little more interesting and beautiful, with some of the best features of CSS3, like background-pattern, background-gradient, box shadows, border-radius, transform, animations, keyframes and the newest CSS3 selectors ( :active / :target / :first-child / :first-letter ).

So, first create your basic HTML structure, with a 3 links menu like <ul><li><a>...</a></li></ul> on which links are related to a specific div with ID. Maybe, you already know this technique, to :target some elements with selectors, but here, we add an effect, to make this element much easier to find, with a little transformation, we decide to translate by 20px the :target text block on X axis, and this, with a quick border-left appear effect.

PS: As you can see, the navigation menu is created with this item posted on cssdeck.