Efeitos de Texto em CSS

Cor do Texto

A propriedade color no CSS permite definir a cor dos elementos de texto. Você pode especificar a cor do texto usando formatos como nomes de cores, valores hexadecimais, RGB e HSL.

Para definir a cor do texto, use a propriedade color seguida pelo valor de cor desejado.

p {
  color: blue;
}

Todos os elementos <p> terão o texto na cor azul.

O CSS fornece muitos nomes de cores predefinidos que você pode usar, como red, green, blue e yellow. Para um controle mais preciso sobre as cores, você pode usar valores hexadecimais, RGB ou HSL.

Os valores hexadecimais são representados por um # seguido por seis caracteres. Cada par de caracteres mostra a intensidade dos componentes vermelho, verde e azul.

• #ff0000 representa vermelho puro
• #00ff00 representa verde puro
• #0000ff representa azul puro

Os valores RGB são especificados usando a função rgb() com três parâmetros representando os componentes vermelho, verde e azul (cada um variando de 0 a 255).

• rgb(255, 0, 0) representa vermelho puro
• rgb(0, 255, 0) representa verde puro
• rgb(0, 0, 255) representa azul puro

Os valores HSL são especificados usando a função hsl() que significa matiz (ângulo de 0 a 360 graus), saturação (porcentagem) e luminosidade (porcentagem).

• hsl(120, 100%, 50%) é para verde
• hsl(240, 100%, 50%) é para azul

As cores do texto podem ser herdadas pelos elementos filhos de seus elementos pais, a menos que sejam explicitamente substituídas. A natureza em cascata do CSS também se aplica às cores do texto, onde regras mais específicas têm precedência.

<div class="parent">
   <p>Este texto herda a cor de seu pai.</p>
   <p class="child">Este texto tem sua própria cor.</p>
</div>

.parent {
    color: green;
}

.child {
    color: blue;
}

O primeiro elemento <p> terá um texto verde herdado da <div> pai. O segundo elemento <p> com classe "child" terá um texto azul devido à regra específica aplicada.

Alinhamento de Texto

A propriedade text-align no CSS permite controlar o alinhamento horizontal do texto dentro de um elemento. Você pode alinhar o texto à esquerda, à direita, ao centro ou justificá-lo.

Para definir o alinhamento do texto, use a propriedade text-align seguida por um destes valores: left, right, center ou justify.

p {
  text-align: center;
}

• text-align: left; alinha o texto à esquerda do elemento. Este é o padrão.
• text-align: right; alinha o texto à direita do elemento.
• text-align: center; centraliza o texto dentro do elemento.
• text-align: justify; estica o texto para preencher toda a largura de um elemento, criando espaçamento uniforme entre as palavras.

Você também pode definir a direção usando propriedades como direction e unicode-bidi. Estas são úteis para idiomas com direções de escrita diferentes, como árabe ou hebraico.

A propriedade direction define a direção, enquanto a propriedade unicode-bidi lida com textos bidirecionais.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Ao combinar essas propriedades, você pode controlar tanto o alinhamento horizontal quanto a direção do seu conteúdo.

Decoração de Texto

A propriedade text-decoration no CSS permite adicionar linhas ao seu texto, como sublinhados, linhas superiores ou linhas cortando o texto. Você pode controlar o estilo, a cor e a espessura dessas decorações.

Para adicionar uma decoração ao seu texto, use a propriedade text-decoration seguida por um ou mais destes valores: underline, overline ou line-through.

p {
  text-decoration: underline;
}

h1 {
  text-decoration: overline;
}

a {
  text-decoration: line-through;
}

Você também pode combinar várias decorações separando os valores com um espaço.

p {
  text-decoration: underline overline;
}

Para controlar ainda mais a aparência das decorações, você pode usar estas propriedades:

• text-decoration-line: Especifica o tipo de decoração (sublinhado, linha superior, linha cortando).
• text-decoration-color: Define a cor da decoração.
• text-decoration-style: Determina o estilo da decoração (sólido, duplo, pontilhado, tracejado).

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Você também pode definir a espessura usando text-decoration-thickness. Aceita valores de comprimento ou palavras-chave como auto, from-font ou thick.

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;
}

Transformação de Texto

A propriedade text-transform em CSS permite alterar a capitalização do texto. Você pode transformar o texto em maiúsculas, minúsculas ou capitalizar a primeira letra de cada palavra.

Para transformar o texto, use a propriedade text-transform seguida por um destes valores: uppercase, lowercase ou capitalize.

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

.title {
  text-transform: capitalize;
}

<p>Este é um parágrafo normal.</p>
<p class="uppercase">Este parágrafo ficará em maiúsculas.</p>
<p class="capitalize">este parágrafo será capitalizado.</p>

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

As transformações de texto ajudam a manter a consistência no estilo de capitalização para certos elementos como títulos ou botões sem precisar digitá-los manualmente em um caso específico.

A propriedade text-transform apenas muda a aparência do texto e não altera seu conteúdo real. Leitores de tela e outras tecnologias assistivas ainda o leem em seu formato original.

Espaçamento de Texto

O CSS oferece propriedades para controlar o espaçamento e o posicionamento do texto, incluindo espaçamento entre letras, espaçamento entre palavras, altura da linha e alinhamento vertical.

Para ajustar o espaço entre caracteres, use a propriedade letter-spacing. Ela aceita valores de comprimento, positivos ou negativos.

p {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -0.5px;
}

Valores positivos aumentam o espaço entre caracteres; valores negativos o diminuem. Isso ajuda a melhorar a legibilidade ou criar estilos tipográficos específicos.

Para controlar o espaço em branco entre palavras, use a propriedade word-spacing. Ela também aceita valores de comprimento.

p {
  word-spacing: 10px;
}

.narrow {
  word-spacing: -2px;
}

Aumentar o espaçamento entre palavras pode ajudar na legibilidade de textos mais longos. Diminuí-lo pode criar uma aparência mais compacta.

A propriedade line-height define a altura de cada linha de texto. Ela aceita valores de comprimento, porcentagens ou valores sem unidade.

p {
  line-height: 1.5;
}

.tall {
  line-height: 200%;
}

Ajustar a altura da linha pode melhorar a legibilidade ao fornecer espaço vertical suficiente entre as linhas e afeta o ritmo visual geral.

A propriedade vertical-align controla o alinhamento vertical de elementos inline em relação uns aos outros ou à linha de base do seu contêiner. Valores comuns incluem baseline, top, middle e bottom.

img {
  vertical-align: middle;
}

.subscript {
  vertical-align: sub;
}

O alinhamento vertical é útil para alinhar itens inline como imagens ou ícones com o texto ao redor.

Sombra de Texto

A propriedade text-shadow no CSS permite criar efeitos de sombra para elementos de texto. Você pode especificar o deslocamento da sombra, o raio de desfoque e a cor para obter diversos efeitos visuais.

Para criar uma sombra de texto, use a propriedade text-shadow seguida por valores que representam o deslocamento horizontal, deslocamento vertical, raio de desfoque e cor.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

A propriedade text-shadow aceita múltiplos valores separados por vírgulas:

• Deslocamento horizontal: Especifica a distância horizontal da sombra em relação ao texto. Valores positivos movem a sombra para a direita; valores negativos a movem para a esquerda.
• Deslocamento vertical: Especifica a distância vertical da sombra em relação ao texto. Valores positivos a movem para baixo; valores negativos a movem para cima.
• Raio de desfoque (opcional): Determina o quanto de desfoque é aplicado à sombra. Um valor maior cria um efeito mais suave e difuso.
• Cor: Define a cor da sombra usando nomes ou valores hexadecimais/RGB/HSL.

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;
}

As sombras de texto podem melhorar a legibilidade quando usadas contra fundos com baixo contraste, mas use-as com moderação, pois sombras excessivas ou de baixo contraste podem dificultar a leitura para alguns usuários.

h2 {
    text-shadow: 
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;
}

Estouro de Texto

O CSS oferece propriedades para lidar com situações em que o texto ultrapassa seu contêiner. Você pode controlar como o texto que transborda é exibido usando as propriedades overflow, white-space e text-overflow.

A propriedade overflow determina o que acontece quando o conteúdo excede as dimensões de seu contêiner. Ela aceita valores como visible (padrão), hidden, scroll ou auto.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

O texto dentro do elemento .container será cortado e ocultado se ultrapassar o limite.

A propriedade white-space controla como os espaços em branco e quebras de linha dentro de um elemento são tratados. O valor nowrap impede que o texto quebre, fazendo com que ele transborde se exceder a largura do contêiner.

p {
  white-space: nowrap;
}

O texto dentro dos elementos <p> não quebrará para a próxima linha, podendo transbordar o contêiner horizontalmente.

Para truncar o texto que transborda com reticências (...), você pode usar a propriedade text-overflow em combinação com overflow e white-space.

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

O texto dentro de elementos com a classe .truncate será truncado com reticências se ultrapassar a largura de 200 pixels.

Ao definir essas propriedades juntas (overflow: hidden, white-space: nowrap e text-overflow: ellipsis), você cria uma única linha de texto que é truncada quando transborda.

Para criar contêineres de texto responsivos que se adaptam a diferentes tamanhos de tela, você pode usar unidades relativas como porcentagens ou unidades vh/vw para dimensões.

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

O elemento .responsive-container terá uma largura de 100% do seu pai e uma altura máxima de metade da altura da janela de visualização. Se o texto exceder essa altura máxima, uma barra de rolagem aparecerá.

Quebra de Texto

O CSS fornece propriedades para controlar como o texto é quebrado dentro de um elemento, incluindo white-space, word-wrap, word-break, overflow-wrap e hyphens.

A propriedade white-space determina como os espaços em branco e as quebras de linha dentro de um elemento são tratados. Ela aceita valores como normal, nowrap, pre, pre-wrap e pre-line.

p {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

Os elementos <p> não quebrarão o texto para a próxima linha, causando transbordamento se o texto for mais longo que a largura do contêiner. Elementos com a classe .pre preservarão os espaços em branco e as quebras de linha como aparecem no código-fonte.

Para controlar se palavras longas devem ser quebradas ou transbordar, use a propriedade word-wrap. Ela aceita valores como normal (padrão) ou break-word.

p {
  word-wrap: break-word;
}

Palavras longas dentro dos elementos <p> serão quebradas e passarão para a próxima linha se transbordarem a largura do contêiner.

A propriedade word-break especifica como as palavras devem ser quebradas ao atingir o final de uma linha. Ela aceita valores como 'normal', 'break-all' e 'keep-all'.

.url {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Elementos com a classe .url quebrarão palavras e URLs em qualquer caractere para evitar transbordamento. Elementos com a classe .keep evitarão quebras de palavras entre letras, mantendo palavras inteiras juntas.

A propriedade 'overflow-wrap' (anteriormente conhecida como 'word-wrap') determina se uma palavra longa deve ser quebrada ou transbordar quando atingir a borda do contêiner. Ela aceita valores como 'normal' (padrão) ou 'anywhere'.

p { 
    overflow-wrap: anywhere; 
} 

Palavras longas dentro dos elementos <p> podem ser quebradas em qualquer ponto, se necessário, para evitar transbordamento.

Para aplicar hífens ao texto quebrado, use a propriedade hyphens. Ela aceita valores como 'none' (padrão), 'manual' e 'auto'.

 p { 
    hyphens: auto;
} 

O texto quebrado dentro dos elementos <p> terá hífens inseridos automaticamente em pontos apropriados, se suportado pelo idioma e pelo navegador.

O uso cuidadoso dessas propriedades ajuda a manter uma experiência de leitura ideal, considerando o idioma do conteúdo e os navegadores de destino.

Efeitos e Técnicas de Texto

O CSS oferece propriedades e técnicas que permitem criar efeitos visuais em elementos de texto. Aqui estão algumas dessas técnicas, incluindo a criação de gradientes e padrões em texto, aplicação de contorno de texto e uso de mascaramento e recorte de texto.

Para criar gradientes ou aplicar padrões ao texto, use a propriedade background-clip com a propriedade text-fill-color. A propriedade background-clip define até onde o plano de fundo deve se estender dentro de um elemento. Ao definir seu valor como text, o plano de fundo será recortado para a forma do texto.

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);
}

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;
}