Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Tricks' Link Nudge

DZone's Guide to

CSS Tricks' Link Nudge

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

A subtle effect on the CSS Tricks site that I've always liked, is the nudged links in the footer of the page.

With recent chatter about Progressive Enrichment I thought it would be fun, and rather quick to show off his effect using just CSS.

CSS

The CSS is marked up so the effect hover effect works as normal in all browsers:

li a {
color: #eee;
}

li a:hover {
padding-left: 20px;
color: #beebff;
}

CSS Animations

With a single line of CSS and zero JavaScript we can enhance the experience for users using browsers that support CSS animations:

li a {
-webkit-transition: padding-left 300ms ease-out;
color: #eee;
}

li a:hover {
padding-left: 20px;
color: #beebff;
}

Demo

Take a look at the demo.

http://jsbin.com/oqoxa/ (edit)

Thoughts

My gut feeling is this effect looks a bit odd without the animation, but it's because the jarring 20px jump. However, there's definitely room for CSS transitions and animations, though aside from the status of the document, I can't see where it's up to on the W3C site...

As soon as there's support for CSS animations and transitions in Firefox as well as Safari, I'm going to start deferring JavaScript animation effects over to the CSS.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}