Efeitos especiais de textos em HTML

Autor: Laura McKinney
Data De Criação: 2 Abril 2021
Data De Atualização: 17 Novembro 2024
Anonim
Create your fade in overlay text animation like never before using HTML and CSS only
Vídeo: Create your fade in overlay text animation like never before using HTML and CSS only

Contente

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.


Efeitos especiais de textos em HTML (Polka Dot RF/Polka Dot/Getty Images)

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:

E 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:

Rolando o texto para cima!

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:

Texto do parágrafo aqui.