Pegando embalo no artigo Link estilizado para e-mails (mailto), achei um site que disponibiliza ícones para download para diferenciar um link do outro. Achei interessante, que na tabela não mostra apenas o mailto mas outros esquemas de URI (nem sabia que tinham outros e nem que tinham esse nome).
Ele tem ícones para as extensõe também. Vale a pena baixar o pacote que está em .zip.
Em relação a links, acredito que a melhor maneira de se chamar atenção para ele é com o uso de imagem. Claro que isso não é usual no meio de textos, falo de links de parceiros ou de outros sites como Orkut. Acho melhor o uso de uma imagenzinha, um ícone com texto ou sozinho.
Estou fazendo o possível para a divulgação do meu blog, e lembrei de um site que divulga "Etiquetas" dos sites cadastrados nele. Acho que esse site não é atualizado há tempos, pelo menos tentei mandar várias vezes alguns sites para lá e não tive sucesso, mas pelo menos ele tem uma ferramenta de criação bem legal.
No site tem um "buttonmaker" que faz etiquetas e disponibiliza para download na hora.
Você pode escolher as cores de fundo, borda e fonte. Dividi-lo em duas partes ou deixa-lo inteiro. Tem como escolher também o estilo de fonte, mas isso já é pré-definido no site, as opções que ele tem são boas, dependendo do tamanho do texto.
No topo da ferramenta, ainda tem um link de histórico com as criações recentes, para usar como base.
Então fica a dica para quem não tem o seu ainda.
[]'s! =)
ps.: Obrigada André pelo post no seu blog!! Fiquei muito contente!!! xD
Meu primeiro artigo foi falando de um assunto relacionado à esse, Link estilizado. Hoje vou mostrar um exemplo para os links de e-mails: <a href="mailto:cleowd[at]gmail[dot]com">. O resultado final será esse: Better Email Links.
Relembrando: "Seletores de Atributos"
O seletor de atributo "é uma declaração em um formato que 'casa' com todos os elementos que sigam aquele formato na árvore do documento." (Maujor). Exemplo:
h1 { color:#C00C00; }
Ou seja, esse estilo será aplicado para todos os headers <h1 />.
Podem ser especificados se tiverem algum tributo:
h1[att] { color:#C00C00; }
Onde att é um atributo qualquer (title, type, align etc). No link acima do Maujor, tem uma tabela bem explicativa. Vale a pena conferir.
O que diferencia os links de e-mail?
Os links de e-mail são diferenciados porque são os únicos que começam com a palavra "mailto:", e é com esse comando que o navegador vai enviar e-mails usando um progama específico do sistema operacional do computador, como o outlook que vem integrado no windows. Podemos então usar esse diferencial para aplicar um estilo específico somente para os links de e-mails:
a[href^="mailto"] { color: #C00C00; }
Complemento
Essa técnica pode ser usada para outras tags e atributos. Isso ajuda muito, pois podemos dar estilos aos elementos sem que precise ficar inventando nomes de classes. Os pseudo-elementos podem ajudar em um efeito ainda melhor:
O estilo vai aparecer quando o mouse passar por cima do link e adicionar o > depois dele. Junto com o caractere são colocados espaços para que os textos não fiquem colados.
Nada é perfeito
Infelizmente, esse estilo não é aceito por todos os navegadores. É, estou me referindo ao IE mesmo. Inclusive o 7. Não sei quanto ao 8, mas não interfere no estilo do link, só não vai aparecer nada. Existem algumas bibliotecas js que podem ajudar a resolver esse probleminha.
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:
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[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.
