Yellow Fade Technique with CSS Animations

I don't think I'm the first person to come up with this idea but figured I'd document it.

If you're unfamiliar with the Yellow Fade Technique, make your way over to the 37signals article that ushered in the design effect that was all the rage for awhile.

This is the same thing but using CSS animations.


/**
 * Quick fade on target to attract user attention
 */

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

Just a short and sweet blog post. You can go back to work now.

Published September 24, 2011
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1001

Conversation

7 Comments · RSS feed
1
Jonathan Snook said on September 24, 2011

And yes, I recognize that the colour in the example is actually gray, not yellow.

2
Pies said on September 25, 2011

Ok, maybe I'm just slower than the average, but I can't figure out the html to make it work. An example please?

3
Patrick said on September 25, 2011

Create an element with an ID, say <div id="lorem">Lorem ipsum</div> and open the URL with #lorem. Then the pseudo class :target will take effect on our lorem-div and the fading will start.

Didn't actually try it, but it should work like that.

4
Thierry Koblentz said on September 25, 2011

Hi Jonathan,

What about using transition? Should be a bit simpler and better regarding performance, isn't?

Something like that may be:


#myID {
  background-color:grey;
  -moz-transition:background 3s;
  -webkit-transition:background 3s;
  -o-transition:background 3s;
  transition:background 3s;
}
#myID:target {
  background-color:yellow;
}

(not sure if all the prefixes are still needed in there)

5
Thierry Koblentz said on September 25, 2011

Ignore me :)
I see that you're going for a fade-in/fade-out. With transition, it would only fade out once the target is not the hash anymore.

6
Thierry Koblentz said on September 25, 2011

Trying to make a better contribution here :)

Lea Verou and Chris Coyier came up with solutions to make the :target technique more usable:

* Change URL hash without page jump

* Hash Tag Links That Don’t Headbutt The Browser Window

7
John MacAdam said on September 26, 2011

@PIES an example: http://jsfiddle.net/macfam/MEzAU/

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.