diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Feb052008

Image behind Text

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>. A tool to create your own selectable text this way is available, too. 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) }

Source:? Google Blogoscoped

CSS, CSS3, Spoiler

Share This Story, Choose Your Platform!

Do NOT follow this link or you will be banned from the site!