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

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}