Efeitos em links com codificaçõo de caracteres

Publicado em: 17/05/2004

Introdução

Mostrar como tirar proveito do uso de folhas de estilo aliadas a codificação de caracteres para obtenção de efeitos em links que tradicionalmente são obtidos com pequenas imagens.

Ao final da leitura deste tutorial você estará capacitado a personalizar links que requerem pequenos efeitos nos seus documentos Web, com uso das CSS e da codificação de caracteres.

Introdução a codificação de caracteres

Se você conhece a codificação de caracteres via ASCII ou através de texto, poderá pular a leitura deste subtítulo.

Em uma linguagem bem simples sem entrar em considerações técnicas detalhadas, pois este não é o foco deste tutorial explico resumidamente a seguir como "funciona" a codificação de caracteres em páginas web.

Vamos acompanhar através de um exemplo:

Este HTML:<p>A codificação de caracteres </p>

"diz" ao browser para colocar na tela do usuário o texto:

A codificação de caracteres

Note a existência de um ç (c cedilha) e um ã ( a com til). Estes são dois caracteres, não existentes em outras línguas (inglês por exemplo), assim como também é um caracter especial o ä (a com trema-dois pontos sobre a letra) que não existe na língua portuguesa.

Note também que ç e ã estão aí no seu teclado, mas procure o ä.

Eu também não tenho a com trema no meu teclado, mas escrevi ele no código HTML deste tutorial.

Aqui mais alguns exemplos de caracteres que não tem no teclado em português: £ ¤ ¥ § µ ¶ ♥ Ø © ® ♣ † ↑

Você consegue visualizar e eu consegui escrever no HTML estas pequenas figuras e símbolos graças a codificação de caracteres que nada mais é do que como o próprio nome sugere, escrever o caracter por um código :-)

Mas como é este código?

Básicamente está disponível duas maneiras de se inserir o código para caracteres no documento HTML. Declaração ASCII e declaração por texto.

Sintaxe geral da declaração ASCII: &#número;

Sintaxe geral da declaração por texto: &texto;

Por exemplo:

no HTML ==> &#163; na tela ==> £

no HTML ==> &clubs; na tela ==>♣

Continue a leitura do tutorial até o fim e depois vá a esta página http://www.asciitable.com/, conhecer algumas tabelas de codifição de caracteres: depois que entrar nesta página, examine primeiro o link "HTML Code"

Agora que já sabemos como obter na tela pequenas figuras, vamos colocá-las em nossos links personalizados com a vantagem de apresentar uma figura usando o HTML de texto.

Nada de <img scr="...> para definir a figura!

Posicionando o caracter no link

Você poderá posicionar o caracter a esquerda, a direita ou nos dois lados do link.

Observe o código a seguir:

<p><a href="caminho.html">&#164; Meu link 1</a></p>
<p><a href="caminho.html">Meu link 2 &clubs;</a></p>
<p><a href="caminho.html">&spades; Meu link 3 &diams;</a></p>

E abaixo o resultado no browser:

Tres links estilizados com caracteres

Revisão dos conceitos

Vimos até aqui que através da codificação de caracteres, podemos inserir pequenas imagens e símbolos nos nossos documentos HTML.

A inserção é feita no fluxo normal do texto como se fora uma letra e desta forma o caracter poderá ser posicionado no início, no final, em ambos e até mesmo dentro de um texto.

Existem disponíveis na Internet as tabelas que fornecem a codificação dos caracteres para você escolher aquele que irá usar.

Vamos nos aproveitar desta facilidade para personalizar links usando as CSS, mas é óbvio que você poderá se valer dos caracteres para outras finalidades decorativas ou não em sua página web.

Efeitos CSS nos caracteres

Vou tomar como base para este tutorial a estilização para um link com um caracter posicionado a esquerda.

As técnicas para posicionamentos a direita ou em ambos os lados é a mesma.

E, a proposta de estilização é a de fazer com que o caracter fique invisível a esquerda do link e torne-se visível quando passa-se o mouse sobre o link.

1o. Passo:

Posicionar o caracter no link. Conforme vimos acima:

<p><a href="caminho.html">&#186; MEU LINK </a></p>

Resulta no browser:

um link de texto: Meu Link

2o. Passo:

Sendo a proposta de estilização a de "esconder e fazer aparecer" o caracter, vamos separar o caracter do texto do link.

A tag HTML própria para esta separação é a tag <span>.

Observe agora o código:

<p><a href="caminho.html"><span>&#186;</span><span>MEU LINK</span></a></p>

3o. Passo:

Em uma página web é comum a existência links com comportamentos diferentes, daí vamos atribuir uma classe para o parágrafo que contém o link.

E, precisaremos de mais uma classe para cada um dos <span> que criamos.

Estas três classes possibilitarão estilizar nosso link.

Criei as classes: .geral .caracter .linque

E o novo código com as classes:

<p  class="geral" ><a href="caminho.html">
<span class="caracter" >&#186;</span><
span class="linque">MEU LINK</span></a></p>

4o. Passo:

Escrever as regras CSS para "esconder" o caracter quando o link estiver no estado UP (em repouso) e fazê-lo "aparecer" quando o link estiver no estado OVER (com o mouse em cima).

O seletor de contexto para o caracter é: .geral a span.caracter

Não sabe o que é seletor contexto? Leia este tutorial.

A propriedade CSS para isto é visibility e a regra para esconder é:

.geral a span.caracter {visibility:hidden;}

e, para aparecer é:

.geral a:hover span.caracter {visibility:visible;}

O efeito destas duas regras é mostrado abaixo:

Link no estado UP ==>link em reposo sublinhado

Link no estado OVER ==> link no estado over com o caracter a direita

Você pode observar que já conseguimos o efeito rollover na bolinha ao lado esquerdo do link (o caracter &#186;), mas podemos incrementar este efeito retirando o sublinhado da bolinha!

Retirar o sublinhado do caracter :

A propriedade CSS que retira o sublinhado é: text-decoration

Você seria capaz de escrever a regra CSS para retirar o sublinhado somente do caracter ?

Se você respondeu:

.geral a:hover span.caracter {text-decoration:none;}

raciocinou corretamente, mas escapou-lhe um detalhe e a regra não fará o efeito que você espera.

O sublinhado em links é uma característica default do browser e válida para todo o texto do link. Você não conseguirá retirar parte do sublinhado do texto do link (o caracter), usando uma regra para <span>.

Temos que usar um artifício que consiste em retirar o sublinhado de todo o link para depois colocar o sublinhado só no texto e não no caracter.

Assim:

.geral a {text-decoration:none;} 
/* retira o sublinhado de todo o link texto mais caracter */ 
.geral a span.linque {text-decoration:underline;} 
/* coloca o sublinhado no texto do link */

Bug no Internet Explorer :

As regras CSS como descritas acima fazem o efeito proposto no tutorial em browsers Netscape, Opera, Firefox, Mozilla, mas o Internet Explorer apresenta um bug que consiste em não mostrar o caracter no estado OVER.

Uma das maneiras contornar este bug é declarar uma regra adicional:

.geral a:hover {margin: 0;} /* hack para IE */

Considerações e dicas finais:

O entendimento da técnica básica mostrada neste tutorial possibilitará a você criar uma variedade cosiderável de efeitos em links. A manipulação dos caracteres quanto ao seu aspecto e posicionamento, conjugada com efeitos adicionais como cores, fundos, e sublinhados somada a sua criatividade, proporcionará mais uma ferramenta CSS para a personalização de seus links.

Alguns exemplos:

Criei uma página com alguns efeitos usando os conhecimentos deste tutorial.

Fique a vontade para copiar e colar o código fonte da página no seu HD e estudar offline.

Ver a página com exemplos

topo