: How does Google put the "shine" on the "block all foo.com results" link that appears? To repro: Go to google and do a search (for example, follow this link to search for Jeff Atwood) Follow

@Sent6035632

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;
}
}

Vote Up Vote Down

@Nimeshi995

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.

Vote Up Vote Down

@Dunderdale272

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:
jsfiddle.net/N8UjY/3/

Vote Up Vote Down

@Cody1181609

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.

Vote Up Vote Down