Banner propaganda da DevMedia - Cursos de desenvolvimento web

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo