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

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

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.

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:

Published at DZone with permission of Remy Sharp, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}