Efeitos especiais de textos em HTML

Escrito por jay leon | Traduzido por monique monteiro
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Efeitos especiais de textos em HTML
Efeitos especiais de textos em HTML (Polka Dot RF/Polka Dot/Getty Images)

O HTML e CSS podem produzir alguns efeitos legais de texto, além de formatações padrões, tais como tamanho da fonte e cor do plano de fundo. Efeitos especiais em HTML fazem com que o texto apareça e se comporte de maneiras incomuns, que chamam atenção do espectador. Utilize-os para animar uma página parada ou aumentar um texto simples.

Outras pessoas estão lendo

Drop Cap (letra capitular)

Em processamento de texto, um drop cat amplia a primeira letra de um parágrafo. Você pode reproduzir esse efeito em suas páginas da web utilizando o HTML e o CSS. Use a propriedade "float" (flutuar) para alinhar a letra capitular e a "font-size" (tamanho da fonte) para aumentar seu tamanho em relação ao resto do texto no parágrafo. Coloque os caracteres nas tags "span".

Exemplo:

<p> <span style="margin: width:0.7em; line-height:80%; font-size:350%"> E </span> Esse é um exemplo de um efeito drop cap utilizando a propriedade float .

Texto rolante

O efeito "marquee" (margem) em HTML faz o texto se mover de maneiras diferentes. O comando "direction" (sentido) no código informa ao navegador para onde o texto irá se mover: cima, baixo, esquerda ou direita. O atributo "behavior"(comportamento) descreve a forma como o texto se moverá. O atributo "Scroll" (deslizar) faz o texto se mover para além da sua área visível e, em seguida, aparecer de novo. O comando "slides" faz o texto parar no final da margem, enquanto o "alternate" (alternativo) faz com que o texto se mova de um lado para o outro. Use o comando "scrollamount" (total de rolagem) para determinar a velocidade, sendo que quanto maior for o número, mais rápida será a rolagem.

Exemplo:

<div style="width:300px"> <marquee behavior="alternate" direction="up" "scrollamount="3" bgcolor="yellow"> Rolando o texto para cima! </marquee> </div>

Título mouseover (passando o mouse por cima)

A tag span da HTML permite que um texto apareça sobre a área onde ele é inserido. Por exemplo, caso deseje acrescentar um resumo de um parágrafo, insira o texto usando a tag span.

Exemplo:

<p span title="Resumo do capítulo 1"> Texto do parágrafo aqui. </p>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível