Existem alguns efeitos bem simples de fazer no texto, principalmente nos links como, por exemplo, colocar sublinhado, tachado ou sobrelinha (linha na parte de cima do texto) e isso dá um bom efeito visual no blog.Uma coisa que já usei e gostei muito foi mostrar sublinhado junto com a sobrelinha quando passa o mouse sobre o link, entre na pagina editar html e coloque isso aqui:
.main a:hover{text-decoration: underline overline;}
Depois clique para salvar e veja que aparece nos links das postagens uma linha embaixo e outra em cima dos links quando coloca o mouse sobre ele, o mesmo poderia ser feito com o tachado que é um risco no meio das letras, mas acho isso é recomendável somente para textos com tamanho de letra maior porque às vezes fica ruim de ler. O código para colocar um risco no meio das letras é
.main a:hover{text-decoration: line-through;}
Uma coisa que já vimos em alguns blogs e não é aconselhável fazer é usar fonte normal para o link e quando coloca o mouse sobre ele o texto fica em negrito, itálico ou muda de tamanho, isso é ruim, pois faz a pagina dar “um pulo”, quero dizer movimenta tudo que está em volta do link, então quando for usar algum efeito para quando o mouse está sobre o link cuidado para não alterar o espaço que ele ocupa, apenas troque cores ou coloque traços como mostramos nesta postagem.
Se quiser usar o sublinhado, sobrelinha, ou tachado em outras partes do blog é só trocar a palavra main por sidebar para o menu ou então deixar somente a:hover{...} isso usará o efeito no blog inteiro. Caso seu blog tenha algum desses efeitos e você queria tirar basta colocar a palava none no código, assim:
.main a:hover{text-decoration: none;}
Outro detalhe importante é antes de colocar esse código veja se já não existe outro igual dando outras instruções, ou seja, se colocar esse código com tachado para as postagens e já existir em outra parte um código dizendo que as postagens não têm nenhum efeito pode gerar conflito e não funciona. Para usar esses efeitos nos link quando não está com o mouse sobre eles apenas apague :hover e deixe somente a letra "a" junto com a palavra main, assim main a{....}.
Para usar esses efeitos em um texto especifico ou seja quero deixar somente essas letras com sublinhado e sobrelinha, então escrevo deste jeito:
<span style="text-decoration: underline overline">seu texto aqui</span>
Só precisa escrever seu texto e trocar as palavras que definem o efeito e já está pronto esse é uma boa maneira de dar destaque para algumas palavras no meio do texto sejam elas links ou não.
Veja também:
Fundo semi transparente
Imagens aleatórias
Barra de endereço animada
Banners deslizando
Fixar botões no canto da pagina
Link desta página
58 Comentários
