Ben's Lab

Brought to you in stunning HTML5!

Experiment Details:

The Hidden Message Trick

05/27

Hello World! In today’s experiment, I’m going to show you how to mix super-secret messages into your webpages using nothing but css! It’s pretty sweet, really neat, and always discrete (lamest rhyme ever?). Using the ::-moz-selection and ::selection style properties, it’s possible to create hidden messages you can sprinkle throughout your site. Is this practical for use in production websites that serve an actual purpose? Probably not. Is it bad ass though? Yeah! To give you a better idea of what I’m talking about, select this paragraph by dragging your cursor over the text as if you were going to copy it. You’ll then see the secret phrase. Do you see it? The effect is super easy to achieve. How ’bout we jump right in?

In your HTML create a paragraph:

<body>
<p>The Internet has changed the way we live. Explorers can document their findings by tweeting about it from the field. Though the way we exchange information is faster than it once was, each day people all over the world work to make it even easier. People must have their information immediately! Thanks to AJAX technology, no longer does one need to refresh a page to get updates from their friends. No more do we have to worry that our connection will die in the middle of typing an e-mail.</p>
</body>

Now that we have our paragraph set up, we want to mark the characters we want to show when the text is selected by wrapping them in span tags. To better understand what I mean, check out the following example:

<body>
<p>The <span>Internet</span> has changed the way we live. <span>Explorer</span>s can document their findings by tweeting about it from the field. Though the way we exchange information is faster than it once was, each day people all over the world work to make it even easier. People <span>must</span> have their information immediately! Thanks to AJAX technology, no longer does one need to refresh a page to get updates from their friends. No more do we have to worry that our connection will <span>die</span> in the middle of typing an e-mail.</p>
</body>

With our <span>’s in place, it’s now time to head to our css. We’re going to be styling the pseudo element, ::selection. In a nutshell, ::selection is the highlight that the browser uses when a user selects text (See below).

The default selection style in Safari

Safari's default selection color (This is the system-wide color chosen in "System Preferences").

Here’s what the css looks like:

::selection { }

So if we want only our <span>’s to show when the user highlights the text, we need to set the ::selection style for both our <p> tags and our <span> tags:

span::selection {
background: transparent;
color: white;
}
p::selection {
background: transparent;
color: transparent;
}

Once you’ve styled the tags, you’re all done! That’s all there is to it. Now when a user highlights a paragraph, they’ll see your super top-secret message. Try it out on the paragraph below:

The Internet has changed the way we live. Explorers can document their findings by tweeting about it from the field. Though the way we exchange information is faster than it once was, each day people all over the world work to make it even easier. People must have their information immediately! Thanks to AJAX technology, no longer does one need to refresh a page to get updates from their friends. No more do we have to worry that our connection will die in the middle of typing an e-mail.