Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

To repro:

  1. Go to google and do a search (for example, follow this link to search for Jeff Atwood)
  2. Follow the first result.
  3. Hit back in Chrome.
  4. Observe that the text that appears that says "Block all codinghorror.com results" has a "shine" affect that occurs to draw your eye to it.

This happens on all sites I follow a link from while logged in to Google using Chrome.

How is this achieved?

I've recorded it here.

The HTML from the relevant section:

<img src="/images/experiments/shimmer_mask.png" style="position: absolute; 
 top: 64px; z-index: 500; border-top-width: 0px; border-right-width: 0px; 
 border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; 
 border-right-style: none; border-bottom-style: none; 
 border-left-style: none; border-color: initial; left: 228px; ">
share|improve this question
1  
What version of chrome are you using? I'm using v12.0.742.91 and I don't see a shine. –  John Conde Jun 14 '11 at 20:40
    
@john other people tell me the same. 11.0.696.77. I just tried to record it and it won't record! It's like an animation effect that goes over the link from left to right, like a white light. –  Michael Pryor Jun 14 '11 at 20:50
7  
@Michael - Maybe Google is running some kind of low percentage A/B test on this and you are one of the lucky ones!? –  Tall Jeff Jun 14 '11 at 21:11
1  
That would explain why the mask is in a folder called experiments. :P –  esqew Jun 15 '11 at 2:59
2  
wait - are you trying to subvert people into blocking Jeff? –  Marc Gravell Jun 15 '11 at 12:15

4 Answers 4

up vote 21 down vote accepted

I'm not on Google's cool person list, but from your screencast I got the idea. You can do this with a clever combination of -webkit-background-clip: text and some gradients (provided you're on a webkit browser). Here's a (messy) demo:

http://jsfiddle.net/N8UjY/3/

share|improve this answer

Here's a live demo of a CSS-only solution. (WebKit browsers only, click "Run" to replay animation).

HTML:

<a href="#" class="kob">Block all results from site.com</a>

CSS:

a.kob{
    color:#36C;
    text-decoration:none;
    font-family:arial, sans-serif;
    font-size:13px;    
    -webkit-animation: wipe 3.0s;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position: -40px 0;
    -webkit-mask-size: 40px 50px;
    -webkit-mask-image:  -webkit-gradient(linear, left top, right top,
                        color-stop(0.00,  rgba(0,0,0,1.0)),
                        color-stop(0.45,  rgba(0,0,0,0.6)),
                        color-stop(0.50,  rgba(0,0,0,0.0)),
                        color-stop(0.55,  rgba(0,0,0,0.6)),
                        color-stop(1.00,  rgba(0,0,0,1.0))); 
}

@-webkit-keyframes wipe {
            0% {
                -webkit-mask-position: -40px 0; 
            }
            100% {
                -webkit-mask-position: 330px 0;
            }
        }
share|improve this answer

You can use the a gradient, and CSS3 animations for this:

 background:-webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat;

@-webkit-keyframes GoogleLikeShine
{
    0%
    {
        background-position:top left;
    }
    100%
    {
        background-position:top right;
    }
}

Of course, you can do the same for Firefox with the Mozilla vendor prefix.

share|improve this answer

The jQuery textgrad plugin can do this. Scroll down to the "textscan" header. This is several years old, though still works; it's just the first to mind. There's a decent chance something more recent exists, and this should at least give you some ideas how to go about searching further.

[Edit: Michael added the HTML snippet while I was writing] Given that image is positioned absolutely, it's almost definite that they're just using a bit of script to slide it across the associated a(or maybe span tag) for the block link. Which, given the textgrad plugin seems like complicating things a bit.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.