Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

1 Comments

× New

Sign In to comment

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+