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: http://snook.ca/s/1001

Conversation

11 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/

8
iphone 5 prices said on September 27, 2011

That is a subject near to my heart cheers, in which are your speak to facts although?

9
iphone 5 leak said on September 30, 2011

Your fashion is so special when compared with a lot of others. Thanks for publishing whenever you possess the possibility,Guess I'll just make this bookmarked.two

10
Iphone 5 said on October 09, 2011

This can be a excellent ideas specially to people new to blogosphere, short and precise information… Many thanks for sharing this one particular. A should study write-up.

11
Unity said on November 04, 2011

Thanks for spending time on the computer (wrintig) so others don't have to.

Add to the conversation

Some HTML is ok; escape your code accordingly. Code blocks should be wrapped in <pre><code>. Your comment may be edited or marked as spam if it appears intended for SEO purposes.
0
Live Preview said on