Feed

28 fevereiro 2008

Link estilizado

Olá leitores,


Vou começar o meu blog com esse artigo que é sobre um efeito em CSS para personalizar links, deixando-os atraentes, diferentes do padrão e reconhecíveis, mesmo se a pessoa tiver algum tipo de daltonismo. Também vou mostrar um pequeno exemplo de uso de seletores de atributos para links.


Os resultados serão esses:


Exemplo
img01_Link com seletores

Primeiro o HTML:


<p><a href="#" target="_self">Link para navegação interna</a></p>

<p><a href="http://cleowdesign.deviantart.com/" target="_blank">Link para outra página</a></p>

<p><a href="arquivos/exemplo.pdf" target="_blank">Link para baixar arquivo</a></p>

As imagens que usei para colocar de fundo estão nesse link. Eu escolhi essas imagens apenas para ilustrar o exemplo. Vocês podem usar outras, mas dêem preferência para imagens de 16x16 pixels ou menor para que não ultrapassem o tamanho da linha.


O código CSS:


p {
font:12px Arial, Helvetica, sans-serif normal;
}

a:link, a:hover, a:active, a:visited, a:focus {
border-bottom:1px dashed;
color:#C00C00;
cursor:crosshair;
text-decoration:none;
white-space:nowrap;
}

a:hover, a:active {
background-color:#C00C00;
color:#FFF;
}

a:active, a:focus {
-moz-outline:none;
outline:none;
ie-dummy:expression(this.hideFocus=true);
}

a[href^="http:"] {
background:transparent url(img/link.gif) right no-repeat;
padding-right:15px;
}

a[href^="http:"]:hover, .txt a[href^="http:"]:active {
background:#C00C00 url(img/linkWhite.gif) right no-repeat;
background-color:#C00C00;
color:#FFF;
}

a[href$=".pdf"] {
background:transparent url(img/pdf.gif) right no-repeat;
padding-right:24px;
}

a[href$=".pdf"]:hover, a[href$=".doc"]:active {
background:transparent url(img/pdf.gif) right no-repeat;
background-color:#C00C00;
padding-right:24px;
}

Explicação:

No primeiro bloco de CSS, defini o tamanho e a fonte para todos os textos que estiverem dentro das tags <p></p>.


No segundo bloco, eu defini o estilo para todos os links do texto: normal (a:link), quando o mouse passar por cima dele (a:hover), quando estiver ativo (a:active), quando já visitado (a:visited) e quando for clicado (a:focus). O link não terá o sublinhado pois defini o seu text-decoration como none, mas coloquei a borda abaixo para mostrar que é um link. Dica: "Não recomendo que usem como destaque só uma cor ou um negrito, a pessoa que estiver lendo o texto pode ter alguma deficiência visual e se não souber diferenciar as cores, por exemplo, não entenderá que é um link." A cor dos links também já tem um padrão que é o azul, então mudei a cor para vermelho escuro (#C00C00). O parâmetro cursor:crosshair é para mudar o cursor do mouse para uma cruzinha, você pode usar outros como help (ponto de interrogação), pointer (mãozinha), wait (ampulheta) etc. O white-space:nowrap é para que os links não quebrem linha se estiverem no final de uma frase.


No terceiro bloco, eu mudo a cor do link para branco e adiciono um background-color para preencher o fundo do link de vermelho quando o mouse passar por cima dele ou quando for ativado.


O quarto bloco serve para tirar aquela borda de quando o link for clicado. Essa borda os navegadores que colocam. Nesse bloco eu fiz um hack para o IE na última linha.


Os quatro últimos blocos usei seletores de atributos para diferenciar os links que levam para outra página (a[href^="http:"]) e os links que vão baixar um arquivo .pdf ([href$=".pdf"]), onde essa extensão pode ser também .doc, .psd, .zip etc. Mais detalhes sobre os seletores de atributo visitem a documentação da W3C. Nesses seletores eu adicionei uma imagem de fundo como background do link, sem repetir e alinhadas à direita. O padding é o espaço para que essa imagem apareça do lado do texto do link. No hover das páginas http eu mudei somente a imagem de fundo.


Aqui mostrei apenas um exemplo para que se possa "fugir" do padrão de estilo dos links (hoje em dia não são tão vistos), que é sublinhado e azul. Agora usem a criatividade e tenham um pequeno diferencial para deixar o seus layouts mais atraentes.



Até a próxima. ;D

2 comentários:

  1. Já está no meu RSS! Parabéns pela iniciativa.

    ResponderExcluir
  2. O melhor post sobre links que eu já lí na minha humilde vida, parabéns e obg!!!

    ResponderExcluir