Google ใส่ "ความเงางาม" ไว้ในลิงก์ "บล็อกผลลัพธ์ foo.com ทั้งหมด" ที่ปรากฏอย่างไร

18

ในการทำซ้ำ:

ไปที่ google และทำการค้นหา (ตัวอย่างเช่นไปที่ลิงค์นี้เพื่อค้นหา Jeff Atwood )
ติดตามผลแรก
ตีกลับใน Chrome
สังเกตว่าข้อความที่ปรากฏว่า "ปิดกั้นผลลัพธ์ codinghorror.com ทั้งหมด" มีผลกระทบ "ส่องแสง" ที่เกิดขึ้นเพื่อดึงดูดสายตาของคุณ

สิ่งนี้เกิดขึ้นในทุกไซต์ที่ฉันติดตามลิงก์ในขณะที่ลงชื่อเข้าใช้ Google โดยใช้ Chrome

สิ่งนี้สำเร็จได้อย่างไร

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
แหล่งที่มา

1

คุณใช้ Chrome รุ่นใดอยู่ ฉันใช้ v12.0.742.91 และฉันไม่เห็นเงางาม

— John Conde

@ john คนอื่นบอกฉันแบบเดียวกัน 11.0.696.77 ฉันพยายามบันทึกแล้วจะไม่บันทึก! มันเป็นเอฟเฟกต์ภาพเคลื่อนไหวที่ข้ามลิงค์จากซ้ายไปขวาเหมือนแสงสีขาว

— Michael Pryor

7

@Michael - บางที Google ใช้การทดสอบ A / B ที่มีเปอร์เซ็นต์ต่ำในเรื่องนี้และคุณเป็นหนึ่งในผู้โชคดี!

— สูง Jeff

1

experimentsที่จะอธิบายว่าทำไมหน้ากากที่อยู่ในโฟลเดอร์ที่เรียกว่า : P

— หลบหนี

2

รอ - คุณพยายามจะล้มล้างคนให้บล็อคเจฟไหม?

— Marc Gravell

20

ฉันไม่ได้อยู่ในรายชื่อบุคคลที่น่าสนใจของ Google แต่จากหน้าจอของคุณฉันมีความคิด คุณสามารถทำได้ด้วยการผสมผสานอย่างชาญฉลาดของ-webkit-background-clip: textและการไล่ระดับสีบางอย่าง (ให้คุณในเบราว์เซอร์ webkit) นี่คือตัวอย่าง (ยุ่ง):

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

— เอียนเฮนรี่
แหล่งที่มา

7

jQuery textgrad ปลั๊กอินสามารถทำเช่นนี้ เลื่อนลงไปที่ส่วนหัว "ตำราสแกน" นี่เป็นเวลาหลายปี แต่ก็ยังใช้งานได้; เป็นเพียงสิ่งแรกที่ควรคำนึงถึง มีโอกาสดีที่มีบางสิ่งที่ใหม่กว่าอยู่และอย่างน้อยก็ควรให้แนวคิดบางอย่างแก่คุณเกี่ยวกับการค้นหาเพิ่มเติม

[แก้ไข: ไมเคิลเพิ่มตัวอย่าง HTML ในขณะที่ฉันเขียน] เนื่องจากภาพนั้นอยู่ในตำแหน่งที่แน่นอนมันเกือบจะแน่นอนว่าพวกเขากำลังใช้สคริปต์เล็กน้อยเพื่อเลื่อนไปยังลิงค์ (หรืออาจจะขยายแท็ก) สำหรับลิงก์บล็อก . สิ่งที่ให้ปลั๊กอิน textgrad ดูเหมือนว่าซับซ้อนบางสิ่งบางอย่างเล็กน้อย

— ซู'
แหล่งที่มา

5

นี่คือตัวอย่างสดๆของ CSS-only solution (เบราว์เซอร์ WebKit เท่านั้นคลิก "เรียกใช้" เพื่อเล่นภาพเคลื่อนไหวซ้ำ)

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

— กรงขัง
แหล่งที่มา

2

คุณสามารถใช้การไล่ระดับสีและภาพเคลื่อนไหว CSS3 สำหรับสิ่งนี้:

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

แน่นอนคุณสามารถทำเช่นเดียวกันสำหรับ Firefox ด้วยคำนำหน้าผู้ขาย Mozilla

— คร่ำ
แหล่งที่มา