CSS Tricks’ Link Nudge

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/ehaja/ (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.

9 Responses to “CSS Tricks’ Link Nudge”

  1. Nice. Works nicely in Chrome also as that’s webkit based. Agreed it does look a little odd without the animation.

    100% agree with transferring animation effects over to CSS and leaving IE to the basic design (as I’m sure they will never support this)

  2. Thanks Remy! Good call, I’ll be integrating the transitional CSS effect straight away. I think I’ll leave off the adding the padding on regular hover though, I agree that would be jarring and I’d rather have it just do nothing. I wonder how this behaves in a browser that supports the transition AND the jQuery, will they fight?

  3. Nice trick, and I actually don’t find the 20px jump *too* jarring, at least not when used horizontally. I can imagine a vertical jump would be more distracting.

  4. Nice work Remy! But do you really think it’s okay that CSS can be used for this? I mean, yes, obviously it’s ground-breaking stuff but surely JavaScript should be used for these types of behavioral enhancements… Where is WebKit heading exactly?? – it just seems like they’re trying to be all fancy and “innovative” but where’s the point in it all? And more importantly, how far are they preparing to go? Maybe the key question is: Is the demonstrated enhancement a behavioral or presentational feature, or both!?

  5. @Chris – my suspicion is that mixing the CSS transitions with jQuery animations isn’t going to work out at all! However, I do feel that in the same way jQuery 1.3 (via Sizzle) makes use of querySelectorAll if found, there should be a jQuery plugin that uses the CSS transitions and animations if available otherwise it’s executed in JavaScript.

    @James – to answer you final question – it’s the presentational feature that becomes better, which is why I referred to the effect as Progressive Enrichment rather than Enhancement.

    I’m a little fuzzy as to the exact difference, but in my head, enhancement makes the feel silky smooth, enrichment makes it look silky smooth, whilst both allow for any browser (or device) without these capabilities to still have the same function and form.

    In my view (as above) CSS transitions and animations are to CSS, what querySelectorAll is to JavaScript.

    Then what about whether CSS should even be used for this? Absolutely! If I can defer any logic that I would normally do in JavaScript to the browser, and the browser can handle it natively – then absolutely I’ll defer it.

    Finally, where’s WebKit heading with CSS transitions and animations? Good question. There’s a lot of talk about the browser wars re-emerging, so there’s justification to get the effects in other browsers. However, I’ve also read Apple’s proposal for transitions, and they’re definitely driving the spec, but there’s very little on the W3C site (though it was mentioned in the most recent W3C minutes). Remember that Chrome uses WebKit, and since it’s Google, it’s got the legs to get out in front of a heck of a lot of people. There’s also AIR which runs WebKit (though currently behind on the CSS transition branch) – so I think these features shouldn’t be ruled out too quickly.

  6. Thanks for your lengthy answer Remy, it’s definitely all a bit clearer now! One thing I’m still unsure about is what Chris touched on earlier – how well will this mix with JavaScript fallbacks? Because of it being a CSS thing I doubt we can do any object detection to see if the browser supports it, so, what way is there of detecting this capability (other than browser/version sniffing). – If there’s no solid way of detecting it then how would one go about programming the JavaScript fallback?

    Another issue is the lack of control we really have over the CSS animations. Using JavaScript it’s possible to run something special on every step of an animation, plus we can use easing ‘equations’ and change the speed of the animation over time – the CSS animations have no such capabilities, as far as I know…

    I’m no longer questioning the suitability of the CSS animations but rather the capabilities, essentially, JavaScript offers a lot more control over everything!

    Already I’m thinking of workarounds to the issues I mentioned but it’s all a bit hacky: To test for browser support of CSS animations you could create a dummy element and animate a property and then test the value of that property when the animation is over. And to emulate a speed-change you could just change the duration over time using JavaScript… I’m not sure if this would work though.

    Sorry about all the moaning, I do like the idea of CSS animations and it’s great that Webkit now has native support of them but I can’t help but feel a bit uneasy…

  7. I find the 20px jump jarring both with and without the animation.

    Not sure why CSS Tricks went for such a huge jump… the effect is a lot more silky and subtle if the jump is somewhere around 5px.

  8. [...] CSS Tricks’ Link NudgeA tutorial for creating links that nudge sideways when they’re hovered over. [...]

  9. hhhhmn sexeh.

    It’s a shame that all engines aren’t so innovative but then if the world worked at the speed of it’s slowest citizen … it would suck ass bigtime.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight