Efeito de texto 3D: letras extrudadas com bom gosto

Um efeito de texto 3D faz letras planas parecerem sólidas ao adicionar laterais, como se cada letra fosse cortada de um bloco e vista levemente de lado. Bem feito, ele usa uma fonte pesada, uma profundidade curta de cerca de 5 a 10 por cento da altura da letra, uma direção constante e laterais num tom mais escuro do fundo. Mal feito, ele usa degradês, brilhos, profundidades longas e várias direções ao mesmo tempo. Mantenha tudo simples e o texto extrudado parece uma placa confiante, não um clip art.

O que faz um texto extrudado parecer bom ou barato

A extrusão tem uma longa história em placas pintadas à mão, cartazes de circo e capas de disco dos anos 1970. Essa história explica por que ela soa calorosa e um pouco nostálgica. Aproveite isso para cafés, sorveterias, marcas infantis, música e eventos. Para uma marca calma e minimalista, costuma ser a voz errada; efeitos de texto ajuda a escolher um que combine.

Como escolher profundidade, direção e cor

Profundidade

As laterais devem ser mais curtas que a largura dos traços da letra. Num título de 160 px, uma profundidade de 8 a 16 px parece sólida; com 40 px começa a parecer uma sombra longa, que é outro estilo. Texto pequeno não aguenta profundidade nenhuma, então use extrusão só em tamanhos de título.

Direção

Escolha uma direção e mantenha em todos os designs. Para baixo e à direita é a mais natural, porque tendemos a ler a luz como vinda de cima e da esquerda. Direto para baixo lembra blocos empilhados. Para cima e à esquerda parece incomum, o que funciona numa frase única mas cansa rápido.

Cor

Três tons fazem todo o trabalho: a face da letra, a lateral e o fundo. A face deve contrastar bastante com o fundo. A lateral fica entre os dois, normalmente um tom profundo do fundo ou da face. Tirar a cor do fundo faz a extrusão parecer 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 resolvem. Cada camada de text-shadow é uma cópia sólida das letras, deslocada um pixel além, sem desfoque. Empilhe camadas suficientes e as cópias se fundem em laterais sólidas. Uma última sombra, 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 é cansativo. Algumas linhas de JavaScript geram a lista para qualquer profundidade, direção e cor, e você só cola no seu CSS.

// 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

Num site, mantenha os títulos extrudados como texto real, para que continuem pesquisáveis, selecionáveis e legíveis por leitores de tela. As sombras não mudam o contraste medido entre letra e fundo, então garanta que a cor da face passe sozinha. Se preferir uma versão mais leve e gráfica, uma única sombra dura sem camadas aparece em sombras de texto; para 3D de verdade, com luz e rotação, você entra no território do WebGL, que gradientes com shader apresenta.

Como criar letras extrudadas passo a passo

1. 1

   Escolha de duas a quatro palavras

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

2. 2

   Use uma fonte pesada

   Uma sem serifa em peso black, uma slab ou uma serifada retrô suave. Fontes retrô sugere algumas com o calor certo.

3. 3

   Escolha as cores da face, da lateral e do fundo

   Contraste forte entre face e fundo; a lateral num tom mais escuro do fundo.

4. 4

   Adicione profundidade numa direção

   Comece com cerca de 6 por cento da altura da letra, para baixo e à direita. Aumente só se ainda parecer plano.

5. 5

   Deixe todo o resto plano

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

Texto extrudado no Gradiently

Extrusão é um dos efeitos de Lettering do Gradiently: ele dá profundidade sólida, para baixo e à direita, a qualquer texto no Studio, com laterais desenhadas nas cores do próprio Mark e um controle de profundidade, então não há camadas para empilhar. O Mark atrás do design leva sua área mais calma para trás das palavras, e assim as letras extrudadas continuam legíveis por mais que o fundo mude no quadro. O efeito de texto com contorno e outros tratamentos estão no mesmo menu, caso a extrusão fique barulhenta demais para a mensagem.