Hay veces que deseamos divertirnos un rato y nos ponemos a escribir mensajitos secretos con CSS usando scroll. Pero hay otras formas de escribir mensajes secretos usando CSS. En esta entrada os enseñaremos a ocultar mensajes en un texto usando la declaración ::selection. Este truco es muy simple, al seleccionar un texto algunas palabras quedan sin seleccionar, y estas al unirse crean el mensaje que queramos mostrar con el uso de CSS3. No es compatible con Internet Explorer 6.

Es muy sencillo de implementar:

p::selection { background: #f00; }
p::-moz-selection { background: #f00; }

La propiedad moz-selection solo es compatible con Firefox, así que deberás usar ambas propiedades, como se muestra en el código anterior. Este código cambiará el fondo a rojo cuando lo seleccionemos. Para esconder mensajes en este párrafo el color del texto y de la fuente debe ser el mismo que el texto que no deseemos mostrar y usar colores de contraste para las palabras que sí deseemos enseñar. Para distinguir las palabras escondidas,  úbicalas entre la etiqueta . Un ejemplo:

<p>Palabras a esconder.
<span>Palabras a mostrar.</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; }

XHTML 1.0 válido.

Compatible con: Firefox 3.+, Safari 3, 4.

CSS 2.1 inválido.

Incompatible con: Internet Explorer 6, 7.

Podemos ver un ejemplo de su funcionamiento.

Vía | Ph. Creative Blog