Efeito de texto 3D: letras extrudidas com bom gosto

Um efeito de texto 3D faz com que letras planas pareçam sólidas ao juntar-lhes lados, como se cada letra tivesse sido cortada de um bloco e vista ligeiramente de lado. Bem feito, usa um tipo de letra pesado, uma profundidade curta de cerca de 5 a 10 por cento da altura da letra, uma direção consistente e cores laterais tiradas de um tom mais escuro do fundo. Mal feito, usa gradientes, brilhos, profundidades longas e várias direções ao mesmo tempo. Mantém tudo simples e o texto extrudido parece uma tabuleta confiante, não clipart.

O que faz o texto extrudido parecer bom ou barato

A extrusão tem uma longa história nas tabuletas pintadas à mão, nos cartazes de circo e nas capas de discos dos anos 70. É por isso que transmite calor e uma ponta de nostalgia. Aproveita isso em cafés, gelados, marcas infantis, música e eventos. Para uma marca calma e minimalista, costuma ser a voz errada; os efeitos de texto ajudam a escolher um que combine.

Como escolher profundidade, direção e cor

Profundidade

Os lados devem ser mais curtos do que a largura dos traços das letras. Num título de 160 px, uma profundidade de 8 a 16 px parece sólida; 40 px já parece uma sombra longa, que é outro estilo. O texto pequeno não aguenta profundidade, por isso limita a extrusão a tamanhos de título.

Direção

Escolhe uma direção e mantém-na em todos os designs. Para baixo e para a direita é a mais natural, porque tendemos a imaginar a luz a vir de cima e da esquerda. Diretamente para baixo parece uma pilha de blocos. Para cima e para a esquerda parece estranho, o que pode resultar numa única afirmação mas cansa depressa.

Cor

Três tons fazem todo o trabalho: a face da letra, o lado e o fundo. A face deve contrastar bem com o fundo. O lado fica entre os dois, normalmente um tom profundo do fundo ou da face. Tirá-lo do fundo faz com que a extrusão pareça iluminada pela mesma luz.

Como fazer um efeito de texto 3D em CSS

O CSS não tem uma propriedade de extrusão, mas sombras empilhadas fazem o serviço. Cada camada de text-shadow é uma cópia sólida das letras, deslocada um pixel mais, sem desfocagem. Empilhando o suficiente, as cópias fundem-se em lados sólidos. Uma sombra final, mais suave, por baixo assenta as letras na página.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Escrever dezenas de camadas à mão é maçador. Algumas linhas de JavaScript geram a lista para qualquer profundidade, direção e cor, e podes colá-la na tua folha de estilos.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Mantém os títulos extrudidos como texto real num site, para continuarem pesquisáveis, selecionáveis e legíveis por leitores de ecrã. As sombras não alteram o contraste medido entre a letra e o fundo, por isso garante que a cor da face passa por si só. Se preferires uma versão mais leve e gráfica, uma única sombra dura sem camadas está tratada em sombras de texto; para 3D a sério, com luz e rotação, entras em território WebGL, que os gradientes com shaders apresentam.

Letras extrudidas passo a passo

1. 1

   Escolhe duas a quatro palavras

   O nome de uma loja, uma única oferta, o título de um evento. A extrusão precisa de espaço à volta.

2. 2

   Compõe-nas num tipo de letra pesado

   Uma sem serifas em peso preto, uma slab ou uma serifada retro e suave. As fontes retro sugerem algumas com o calor certo.

3. 3

   Escolhe as cores da face, do lado e do fundo

   Contraste forte entre face e fundo; o lado num tom mais escuro do fundo.

4. 4

   Junta profundidade numa só direção

   Começa em cerca de 6 por cento da altura da letra, para baixo e para a direita. Aumenta só se ainda parecer plano.

5. 5

   Deixa tudo o resto plano

   Detalhes, datas e preços numa sem serifas simples e sólida, sem efeito.

Texto extrudido no Gradiently

Extrudir é um dos tratamentos de Letras do Gradiently: dá a qualquer texto no Studio uma profundidade sólida para baixo e para a direita, com lados desenhados nas cores do próprio Mark e um seletor de profundidade, sem camadas para empilhar. O Mark por trás do design move a sua zona mais calma para trás das palavras, por isso as letras extrudidas mantêm-se legíveis por mais que o fundo mude ao longo da imagem. O efeito de texto com contorno e outros tratamentos estão no mesmo menu, se a extrusão se revelar demasiado forte para a mensagem.