Google, görünen “parlaklığı” görünen “tüm foo.com sonuçlarını engelle” bağlantısına nasıl yerleştirir?

18

Çoğaltmak için:

Google'a gidin ve bir arama yapın (örneğin, Jeff Atwood'u aramak için bu bağlantıyı izleyin )
İlk sonucu takip edin.
Chrome'da geri dönün.
"Tüm codinghorror.com sonuçlarını engelle" yazan metinde gözünüzü çizmek için "parlaklık" etkisi olduğunu gözlemleyin.

Bu, Chrome kullanarak Google'da oturum açtığımda bağlantısını takip ettiğim tüm sitelerde olur.

Bu nasıl başarılır?

İlgili bölümdeki HTML:

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

google

— Michael Pryor
kaynak

1

Hangi krom sürümünü kullanıyorsunuz? V12.0.742.91 kullanıyorum ve parlaklık görmüyorum.

— John Conde

@john diğer insanlar bana aynısını söylüyor. 11.0.696.77. Sadece kaydetmeye çalıştım ve kaydetmeyecek! Bu, beyaz bir ışık gibi, soldan sağa bağlantıyı geçen bir animasyon efekti gibi.

— Michael Pryor

7

@Michael - Belki Google bu konuda bir çeşit düşük yüzde A / B testi yapıyor ve şanslı olanlardan birisiniz !?

— Uzun Jeff

1

Bu, maskenin neden adlı bir klasörde olduğunu açıklar experiments. : P

— esqew

2

bekleyin - insanları Jeff'i engellemeye mi bölüyorsunuz?

— Marc Gravell

20

Google'ın havalı kişi listesinde değilim, ama ekran görüntünüzden fikri aldım. Bunu, -webkit-background-clip: textbir webkit tarayıcısında olmanız şartıyla akıllı bir kombinasyon ve bazı degradelerle yapabilirsiniz. İşte bir (dağınık) demo:

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

— Ian Henry
kaynak

7

JQuery textgrad eklentisi yapabilirsiniz. "Textscan" başlığına ilerleyin. Bu hala çalışıyor olsa da, birkaç yaşındadır; ilk akla gelen şey. Daha yeni bir şeyin mevcut olması için iyi bir şans var ve bu en azından daha fazla arama yapmak için nasıl bir fikir vermeli.

[Düzenle: Michael, yazarken HTML snippet'ini ekledi] Görüntünün kesinlikle konumlandırıldığı göz önüne alındığında, blok bağlantısı için ilişkili bir (veya yayılma etiketi) boyunca kaydırmak için sadece biraz komut dosyası kullandıkları neredeyse kesin. . Hangi, textgrad eklentisi verildiğinde işleri biraz karmaşık gibi görünüyor.

— Su'
kaynak

5

İşte sadece CSS çözümünün canlı demosu . (Yalnızca WebKit tarayıcılarında animasyonu yeniden oynatmak için "Çalıştır" ı tıklayın).

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

— Nick
kaynak

2

Bunun için degrade ve CSS3 animasyonlarını kullanabilirsiniz:

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

Elbette, Mozilla satıcı önekiyle Firefox için de aynısını yapabilirsiniz.

— kurnaz
kaynak