Esse artigo é para quem já entende o básico de Css, ou alguém disposto a aprender, pesquisar na web e testar algo diferente.Esse pontilhado pode dar uma aparência feia aos links, ou pode ser um diferencial, claro que isso depende do modelo, para alguns esse estilo não combina, e, algumas vezes ele combina mas não aparece em todos os navegadores, por isso, no decorrer do post também mostrarei uma forma de usar borda no lugar deles, para quem quiser.
O código que retira o pontilhado pode ser outline:none; mas alguns casos, dependendo do modelo Css pode haver um tipo de borda, alguns navegadores podem ter em sua configuração algo que faça um efeito parecido, caso isso ocorra essa borda aparece em todos os sites ao clicar num link, só estou citando isso para evitar que você pense que é um problema em seu blog ou site e que você precise resolver.
Entender estilo Css para links
Tratando-se de link, primeiro vamos frisar a parte que, no Css, faz referência ao link, ou seja, que vai 'dizer' qual elemento estarei modificando.
a:link ou apenas a refere-se ao link em geral
a:hover refere-se ao link quando passarem o mouse sobre ele
a:active refere-se ao link recém clicado
a:visited refere-se ao link já visitado(página visitada)
Exemplos de Css para links
Agora vamos ver um exemplo de código Css para links:
a:link{color:red;text-decoration:none;}
a:hover{color:green;text-decoration:underline;}
Antes do caracter abre-chaves está o 'tipo de elemento' que receberá o efeito ou aparência, no caso aqui são os links e os links que a pessoa passar o mouse.
Dentro dos caracteres chaves estão as aparências deles, que são a cor da fonte e text-decoration é o traço embaixo do link, e, para a:link eu coloquei text-decoration:none; sendo assim, o link não terá esse efeito, mas para a:hover eu coloquei text-decoration:underline; e sendo assim, o link só terá um traço embaixo quando o visitante passar o mouse sobre ele.
Acho que com os exemplos acima, dá para perceber que dentro de chaves estão os estilos, e logo antes de abre-chaves está o nome do elemento que receberá este estilo.
Quem usa o blogger pode ver onde coloca Css no Html do blogger
Código para eliminar a borda pontilhada
Uma maneira é procurar por outline no Css e apagar ele, isso para quem entende de Css, outra forma simples é adicionando o código que evita que ele apareça para os links, mas deve ser colocado na parte baixa do Css.
Eliminar o pontilhado do link
a:link, a{outline:none;}
Eliminar o pontilhado do link ao passar o mouse
a:hover{outline:none;}
Eliminar o pontilhado do link ao clicar
a:active{outline:none;}
Eliminar o pontilhado do link em geral
Abaixo eu juntarei o efeito outline:none para todos os efeitos de links, ou seja, para reduzir os códigos acima é possível agrupar eles e dar o mesmo estilo, isso é aplicável quando vários elementos terão o mesmo efeito.
a:link,a,a:hover,a:active{outline:none;}
Personalização com o outline
Acima você viu exemplos de códigos para eliminar um outline(contorno), entre chaves ou {dentro de chaves} está a personalização, e, você pode usar os mesmos códigos acima para criar efeitos, substituindo o outline:none; por outline:dotted red 1px; você teria um efeito pontilhado vermelho de 1 pixel, você pode aumentar esses pontinhos mudando o numero 1 e usar um outro nome de cor básica em inglês no lugar de red.
Exemplo de contorno do link pontilhado
a{outline:dotted red 2px;}
Resultado do pontilhado seria parecido
Exemplo de contorno do link tracejado
a{outline:dashed orange 3px;}
Resultado do tracejado seria parecido
Exemplo de borda do link pontilhada
a{border:dotted green 2px;}
Resultado do pontilhado seria parecido
Exemplo de borda do link sólida
a{border:solid blue 1px;}
Resultado da borda sólida seria parecido esse
Nesses últimos exemplos pode-se perceber que usei border no lugar de outline, isso porque ela tem quase o mesmo efeito e funciona em todos os navegadores, diferente do outline que não funciona no Internet Explorer 7 e versões anteriores.
Também pode notar que além do tipo de contorno, usei nomes de cores diferentes em inglês e espessuras diferentes.
Tirar ou mudar traço embaixo de links
O traço que fica abaixo dos links, frases ou palavras pode ser retirado da mesma forma que expliquei bem acima, usando o text-decoration:none; Veja um exemplo de código:
a{text-decoration:none;}
Abaixo outros exemplos de efeitos com tipos diferentes de text-decoration
Exemplo text-decoration:overline; Com traço em cima
Exemplo text-decoration:line-through; Riscado
Exemplo text-decoration:underline; Sublinhado
Boa noite amigo,
ResponderExcluirestou usando um jQuery light box.
ele aumenta os thumbnails e mostra uma iamgem grande no centro da tela e permite navegar para a próxima e tal...
O problema pe que quando clico no botão next por exemplo, no IE9 o pontilhado aparece, mesmo usando os recursos que tu mostrou aqui.
terias alguma solução para este caso? já pesquisei na net, mas não achei nada ainda...
Valeu a força!
Grande Abraço e parabéns pelo post!
Anônimo
ResponderExcluirInfelizmente só o que posso fazer imaginar algumas coisas, pode ser alguma coisa em seu código, pode ser até uma característica da versão do Internet Explorer 9, o Ie7 não reconhecia o Código Outline e inseria um tipo de pontilhado em imagens e alguns links ao serem clicados. Já o Internet Explorer 8 era sem esses problemas, reconhecia Outline e não inseria pontilhados nos links ao serem clicados, talvez o Ie9 está com uma das características do Ie7, a pouco tempo ele estava na versão Beta, ele pode estar ainda com alguma 'falha'.
Essas peculiaridades do navegador Ie pode ter alguma relação com suas configurações ou até mesmo alguma configuração do Windows.
como faz pra tirar as linhas do modelo simples do blogger????
ResponderExcluirNão entendi que linhas, mas se você se refere ao sublinhado abaixo de links, aí, você terá que procurar no seu css do HTML onde refere se a links e ver se tem text-decoration:underline e retirar, ou melhor, substituir por text-decoration:none; mas se não achar text-decoration:underline; você pode tentar adicionar text-decoration:none;
ExcluirGeralmente está parecido com esses exemplos:
.sidebar a{text-decoration:underline;
}
.post a{color:#cdffff;
text-decoration:underline;
}
Perceba que, nos estilos referentes a links você pode encontrar antes de um caractere abre-chaves{ uma letra a, pode ser parecido com os exemplos acima, também pode ser parecido com esses:
.footer a:hover{text-decoration:underline;
}
#main a:link{color:$text-color;
text-decoration:underline;
}
Sendo assim, você pode encontrar os text-decoration:underline ou substituir por text-decoration:none
É melhor fazer isso usando seu modelo em um blog de testes, antes salve seu modelo.
Você pode tentar adicionar, na parte baixa do Css de seu HTML esse trecho de código:
a,a:link,a:hover,a:visited{text-decoration:none !important;}
Dependendo do estilo de seu modelo pode funcionar.
Como faço para que o link recém clicado fique com o contorno pontilhado?
ResponderExcluirPor onde devo entrar para fazer isso? Qual o caminho para chegar lá?
Como faço para que o link recém clicado fique com o contorno pontilhado?
ResponderExcluir