Yellow fade with CSS and a simple image

Via Think Vitamin I find a cool way to highlight the current element. Lots of people do this by calling some kind of javascript library, it’s so common it’s been dubbed the yellow fade technique. But javascript isn’t really needed, you just need CSS and an image.

First: you can jump to any id on the current page by appending #some-id-here to the url. This includes all the “semantic” ids you’ve added to the page such as #content, #sidebar, and so on. Very useful if you want to point out a certain section of a page to a friend, just look at the source, try to find an id nearby, and add it to the url.

If you want to make things even easier on your own site, you can visually highlight things that get referenced via the above method. That’s where the :target psuedo selector jumps in to save your day. Please note that :target is CSS3, and only currently works in non-crap browsers. But perhaps this effect is something not all users really need?


a:target {
background: #234af5;
}

This highlights all links that get referenced via the URL with a nice blue color. So they need an id added. Makes perfect sense for all kinds of documentation where you want to refer someone to a certain method or even sentence.

But it gets better:


:target {
background: url(yellow-fade.gif);
}

We’ve removed the limit of only targeting links with by using :target straight off. So all targeted elements will get affected by this rule. What next? Well, we use a small animated image to fade from one color to the next. It’s a really easy way to add dynamics to a page.

Try the effect by jumping to the code example above.

I really think this makes internal links a whole lot more useful, especially for jumping to the bottom of the page, where it’s not possible for the browser to scroll down enough to get the targeted element to the top. Needless to say, I’ve added this effect to this site too. Hope you can find something to use it for too.

10 responses to “Yellow fade with CSS and a simple image

  1. @Peter: It doesn’t work if you click the same thing twice, but if you click something else between it’ll work. Try these.

    I agree – it’s nice, although a fade without a GIF would be nice…

  2. Always good with alternatives. However, I’d argue that IE users are the users who would have the most use of/need for visual (and any other sort of) guidance… :-)

  3. Hey, im not sure how useful that actually is. I mean yeah it works(the first time) but what happens when you wanna make your text longer? You could do this really painlessly with about 2 lines of jquery.

  4. @Robert Nyman: Well, the IE users are getting fewer and fewer, and IE8 is approaching. Soon helping people will be easy :)

    @THE|ODIN: What do you mean “make text longer”?

  5. Pingback: THE|ODIN.co.uk | Web Blog
  6. Hi,

    Nice stuff, simply explained but I have to agree with Odin above there … couple of lines of jquery and you’re done.

    Cheers.

  7. Well, guys, it’s useful in terms of progressive enhancement, where you should always do every enhancement at the lowest level, where it places the least burden on the end user’s resources.

    Using Emil’s CSS method, the desired effect is achieved even without javascript — to be enjoyed equally by those who don’t have it enabled for some reason.

    I like it. So … Thank you, Emil!

  8. @Jeff Seager: Thanks for your support :) There are pros and cons to both techniques. The descibed method is best when you believe that a yellow highlight is design, then it should be in the CSS. If you think it’s behaviour, then in the JS file.

  9. Pingback: Philip beel Web design portfolio
Comments are closed.