Efeitos em links com codificaçõo de caracteres
Publicado em: 17/05/2004Introduçã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 ==> £ na tela ==> £
no HTML ==> ♣ na tela ==>♣
Continue a leitura do tutorial até o fim e depois vá a esta página https://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">¤ Meu link 1</a></p>
<p><a href="caminho.html">Meu link 2 ♣</a></p>
<p><a href="caminho.html">♠ Meu link 3 ♦</a></p>
E abaixo o resultado no browser:
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">º MEU LINK </a></p>
Resulta no browser:
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>º</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" >º</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 no estado OVER ==> 
Você pode observar que já conseguimos o efeito rollover na bolinha ao lado esquerdo do link (o caracter º), 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.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
