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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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 DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}