Google Blogoscoped

Tuesday, February 5, 2008

Image Appears When Text Is Highlighted

Try selecting the innocent-looking text over at this page using Firefox.

Spoiler: What happens is that you can see the word "Google" appear. This hack utilizes the CSS3 "selection" pseudo-element. Each portion of letters in the HTML receives its own class, like <span class='color-51'>foo</span>. Stylesheet definitions like the following handle the rest:

  ...
  .color-51::selection {
    color: rgb(79, 106, 115);
    background: rgb(79, 106, 115)
  }
  .color-51::-moz-selection {
    color: rgb(79, 106, 115);
    background: rgb(79, 106, 115)
  }
  ...

A tool to create your own selectable text this way is available, too.

[Thanks Mukthar and Ionut!]

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!