Como ocultar seu email dos spambots somente com CSS

Postado por: Pedro Rogério em
  • 26 set
  • 10

Hoje em dia se você deixar seu e-mail a deriva na Internet, sabe que amanhã sua caixa estará lotada de e-mails indesejados, pessoas querendo vender de tudo, desde Softwares até Viagra, mas acabei achando uma técnica bem interessante de ocultar o e-mail somente com CSS, utilizando da pseudo-classe :after, que para nossa alegria, não funciona no IE. Para essa façanha, utilizaremos o seguinte código CSS.


/* \40 corresponde ao símbolo "@" */
#email:after{
content: " <pedrorogerio\40pinceladasdaweb.com.br>";
}

Como podem ver o \40 será substituído pelo “@”. No HTML, utilize algo do tipo:


<p id="email">Webmaster</p>

Agora é só dar uma olhada no exemplo, lembrando que no IE isso não funciona.

CSS3 – a pseudo-classe :not(x)

Postado por: Pedro Rogério em
  • 19 set
  • 2

Para entender a pseudo-classe negação, :not(x), é muito simples, você deve passar um argumento para ela que ficará dentro dos parênteses, exemplo:


* {background-color:#FFFFFF;}
*:not(p) {background-color:#FF0000;}

O que eu defini na regra acima é que tudo no meu documento vai ter um background vermelho, menos tudo que estiver dentro da tag p, como podem ver nesse exemplo. Atualmente funciona no Mozilla, Konqueror e Safari.

Referências

CSS3 – Seletores de combinação irmão em geral

Postado por: Pedro Rogério em
  • 14 set
  • 6

O seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.

Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:


h1 ~ pre {border:1px dotted red;}

Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:


<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>

Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.

Referências

CSS3 – A pseudo-classe :target

Postado por: Pedro Rogério em
  • 13 set
  • 8

Com a chegada das CSS3, que ainda estão em desenvolvimento, eu fico a cada dia mais surpreendido com o seu grande potencial, só não fico mais ainda devido a nosso querido amigo Internet Explorer, mas isso é um caso a parte. Hoje tomei conhecimento de mais uma pseudo-classe das CSS3 chamada :target, onde você pode manipular as âncoras da sua página. Para aqueles que não sabem o que é uma âncora em HTML, imagine uma URL com um sinal de tralha (#) seguido de um nome de âncora ou um ID de qualquer elemento, que ao você clicar é levado para o local ou destino indicado no mesmo documento. Esse destino também pode ser chamado de :target, exemplo:



http://www.exemplo.com/top.html#secao_2

O exemplo acima ilustra bem o que foi dito. Agora, se utilizar-mos a pseudo-classe :target podere-mos aplicar qualquer estilo CSS a âncora em questão no momento em que o usuário clicar na mesma. Levem em consideração o seguinte CSS:


*:target { color:#8A7575; background-color:#D0C8C8; border:3px double #000; }
*:target::before { content:url(target.png) }

Agora, abram esse exemplo. Experimentem clicar no link do topo da página, como podem ver, é aplicado os estilos definidos somente a âncora especificada, com isso é possível fazer muita coisa interessante, só basta colocar a cabeça pra funcionar. E lembrando que essa propriedade só funciona nos Browsers baseados no motor Gecko, Konqueror e Safari.

Referências

CSS3 – A pseudo-classe :empty

Postado por: Pedro Rogério em
  • 12 set
  • 4

Essa pseudo-classe é aplicada a elementos vazios do HTML, ou seja, imagine que você tem uma tag p dessa forma:


<p></p>

Se no CSS você criar uma definição dessa forma:


p:empty { background-color:#FF0000; }

Todos os parágrafos vazios da página ficarão com a cor de fundo vermelha. A primeira impressão pode parecer inútil utilizá-la, mas imagine onde o conteúdo é gerado dinamicamente, seria uma boa pra vc descobrir quais tags estão sem conteúdo. Para que fique mais claro o entendimento do tutorial, dêem uma olhada no seguinte exemplo. Lembrando que só funciona no Mozilla, Konqueror e Safari.

Referências

Como evitar o resize de textareas no Safari

Postado por: Pedro Rogério em
  • 20 ago
  • 8

Até o lançamento do Safari para o Windows eu nunca tinha o utilizado, mas por esses dias descobri uma coisa bastante interessante, se você utiliza o Safari, experimente peguer um formulário qualquer, vá até o textarea e tente redimensioná-lo. O Safari suporta essa opção, como você pode ver na imagem abaixo:

Textarea com resize

Não ficou satisfeito e quer fazer um teste? Dê uma olhada nesse exemplo. Mas se você não quer que isso aconteça nos seus formulários, existe uma maneira bem simples de corrigir isso, basta utilizar as propriedades do CSS min-height, max-height, min-width e max-width, onde iremos travar a altura e a largura mínima. Vejamos um exemplo:

CSS


textarea {
	min-width:400px;
	max-width:400px;
	min-height:250px;
	max-height:250px;
	width:400px;/* Utilizado para o IE6 */
	height:250px;/* Utilizado para o IE6 */
}

Experimente agora tentar redimensionar esse textarea.

Páginas:«1...9101112131415...24»