Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection. The ::selection declaration is a new tool used in CSS 3, but currently isn’t supported by Internet Explorer. The idea is that you can change the default blue colour when you select text on a web page. It’s very easy to implement:
p::selection { background: #f00; }
p::-moz-selection { background: #f00; }
The ::-moz-selection is for Firefox support, so you should always remember to use both. The code above will change the background colour to red when you select any paragraphs on the page. So how can we use this for hidden messages? Easy. Simply change the font colour and the text colour to be the same for the non-important text and use contrasting colours for the words that you do want to show. To distinguish the hidden words, wrap them in a <span> tag. For example:
<p>These are the words I want to hide.
<span>And these are the words I want to show</span></p>
p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }
You can see this method being used on our demo page here. Just highlight all of the text to reveal the hidden message!
