Google Adwords

08/03/2010

CSS-Trick: Escondendo uma mensagem no texto

Todos estão sabendo e já utilizando algumas das novas possibilidades que o CSS3 esta nos trazendo. Já vimos antes como usar o border-radius.

Hoje trago um truque realmente muito simples que, a primeira vista, pode não parecer útil. Porém, sua utilidade estará diretamente ligada a sua criatividade ao usá-lo. Lembrando sempre que, como na maioria esmagadora das vezes, esse truque não é útil para o Internet Explorer.

O truque é para esconder mensagens em seus textos. É uma nova possibilidade que o CSS3 nos traz, usando a pseudo-classe ::selection para mudar a cor e o background do texto, fazendo com que apareçam palavras soltas que poderam formar uma frase, dar uma dica, enfim, como eu disse antes, vai da criatividade de cada um.

É realmente muito simples, por parte do CSS, implementar esse truque à seus textos. Vejam:

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

Com o comando acima você está declarando que quando a tag p for selecionada, o backgound dessa seleção será #F00 vermelho. Então, já entenderam como podemos esconder as mensagens usando essa seleção? Veja se você pensou igual a mim então.

	<p>Quero esconder essa parte.
<span>E aqui está a minha mensagem secreta.</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; }

Conseguiram visualizar a idéia da brincadeira? No código acima estamos declarando que, quando selecionada, a tag p terá o background e a cor do texto da cor preta. Logo, o texto ficará "invisível". Mas estamos declarando que a tag span terá o background da cor da branca, então quando selecionado, o texto mostrará somente a mensagem entre a tag span.

Veja um pequeno exemplo que contém uma dica de onde esse truque pode ser usado. Para descobrir o truque, lembrem-se de selecionar todo o texto da página de exemplo.

Espero que tenham gostado de mais essa possibilidade que o CSS3 traz para nós, e que criem maneiras realmente criativas de usar esse truque. E lembrem-se, IE ainda não entrou nessa nova era do CSS, logo, não funcionará nele.

Autor: Léo - Comunicaweb