domingo, 6 de junio de 2010

Ocultar mensaje en un texto

Cuando hablamos de CSS 3 inmediatamente nos viene a la mente nuevos estilos para utilizar en nuestro blog pero también se utiliza para fines menos serios. ¿Recuerdan aquella entrada sobre marcar texto con color? pues va del mismo tema.
En Xyberneticos descubro que podemos crear un mensaje oculto utilizando la declaración ::selection no le veo mucha utilidad pero hay otras muchas cosas que tampoco la tienen.

Añadimos en nuestra hoja de estilos justo antes de ]]></b:skin> lo siguiente:

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; }

Donde queremos ocultar el mensaje:
<p> Este sería un mensaje oculto.
<span> Y esto el texto que voy a mostrar</span></p>

Para ver el mensaje sólo debemos seleccionar el texto y aparecerá el mensaje oculto.

Lorem ipsum dolor Este sit ametEste, consectetur adipiscing elit. Mauris sería lacus sem, gravida sed, congue et, sería sagittis sit amet, sapien. Maecenas feugiat elit ac nunc. Sed turpis diam, miimperdiet eget, condimentum ut, mattis nec, mensaje midui. Cras vel oculto urna ut nisl porttitor mensaje vehicula. Mauris rutrum tellus a nunc. Sed purus sapien, vulputate posuere, auctor in, malesuada vel, leo. Curabitur nada sodales iaculis ante del . Nulla accumsan vestibulum felis. Vivamus commodo otro . Sed non eros sit amet sem cursus tincidunt mundo . Integer blandit vulputate secreto sem. Etiam dignissim sodales nisi.

No hay comentarios:

Publicar un comentario