Effetto testo 3D: lettering estruso con gusto

Un effetto testo 3D rende solide le lettere piatte aggiungendo dei lati, come se ogni lettera fosse ricavata da un blocco e vista un po’ di sbieco. Fatto con gusto, usa un carattere robusto, una profondità breve di circa il 5-10 per cento dell’altezza delle lettere, una sola direzione coerente e colori laterali presi da una tonalità più scura dello sfondo. Fatto male, usa sfumature, riflessi lucidi, profondità eccessive e più direzioni insieme. Se resti sul semplice, il testo estruso sembra un’insegna sicura di sé e non una clipart.

Cosa rende il testo estruso elegante o dozzinale

L’estrusione ha una lunga storia nelle insegne dipinte a mano, nei manifesti da circo e nelle copertine dei dischi anni Settanta. Per questo suona calda e un po’ nostalgica. Sfruttala per caffetterie, gelaterie, marchi per bambini, musica ed eventi. Per un brand calmo e minimale di solito è la voce sbagliata: effetti testo aiuta a sceglierne uno adatto.

Scegliere profondità, direzione e colore

Profondità

I lati devono essere più corti dello spessore dei tratti delle lettere. Su un titolo da 160 px, una profondità da 8 a 16 px risulta solida; con 40 px comincia a sembrare un’ombra lunga, che è un altro stile. Il testo piccolo non regge alcuna profondità, quindi limita l’estrusione ai corpi da titolo.

Direzione

Scegli una direzione e mantienila in ogni design. In basso a destra è la più naturale, perché tendiamo a immaginare la luce che arriva da in alto a sinistra. Dritto verso il basso dà l’idea di blocchi impilati. In alto a sinistra risulta insolito: può funzionare per una sola dichiarazione, ma stanca presto.

Colore

Tre toni fanno tutto il lavoro: la faccia della lettera, il lato e lo sfondo. La faccia deve contrastare con forza con lo sfondo. Il lato sta nel mezzo, di solito una tonalità profonda dello sfondo o della faccia. Prenderlo dallo sfondo fa sembrare l’estrusione illuminata dalla stessa luce.

Come creare un effetto testo 3D in CSS

CSS non ha una proprietà per l’estrusione, ma le ombre impilate fanno lo stesso lavoro. Ogni livello di text-shadow è una copia solida delle lettere, spostata di un pixel in più, senza sfocatura. Impilane abbastanza e le copie si fondono in lati solidi. Un’ultima ombra più morbida sotto ancora le lettere alla pagina.

.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);
}

Scrivere decine di livelli a mano è noioso. Poche righe di JavaScript producono l’elenco per qualsiasi profondità, direzione e colore, da incollare nel tuo foglio di stile.

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

Su un sito tieni i titoli estrusi come testo vero, così restano ricercabili, selezionabili e leggibili dagli screen reader. Le ombre non cambiano il contrasto misurato tra lettera e sfondo, quindi assicurati che il colore della faccia lo superi da solo. Se preferisci una versione più leggera e grafica, una sola ombra netta senza livelli è trattata in ombre del testo; per un vero 3D con luci e rotazione si entra nel territorio di WebGL, che shader gradients introduce.

Creare il lettering estruso passo dopo passo

1. 1

   Scegli da due a quattro parole

   Il nome di un negozio, una sola offerta, il titolo di un evento. L’estrusione ha bisogno di spazio intorno.

2. 2

   Componile in un carattere robusto

   Un sans in peso black o uno slab, oppure un serif retrò morbido. Font retrò ne suggerisce alcuni con il calore giusto.

3. 3

   Scegli i colori di faccia, lato e sfondo

   Forte contrasto tra faccia e sfondo; il lato è un tono più scuro dello sfondo.

4. 4

   Aggiungi profondità in una sola direzione

   Parti da circa il 6 per cento dell’altezza delle lettere, in basso a destra. Aumenta solo se sembra ancora piatto.

5. 5

   Lascia piatto tutto il resto

   Dettagli, date e prezzi in un sans semplice e pieno, senza effetti.

Il testo estruso in Gradiently

Estrusione è uno dei trattamenti Lettering di Gradiently: dà a qualsiasi testo nello Studio una profondità solida in basso a destra, con i lati disegnati nei colori del Mark e una manopola per la profondità, quindi niente livelli da impilare. Il Mark dietro il design sposta la sua zona più calma dietro le parole, così il lettering estruso resta leggibile per quanto lo sfondo cambi lungo l’inquadratura. L’effetto testo contornato e gli altri trattamenti sono nello stesso menu, se l’estrusione si rivelasse troppo rumorosa per il messaggio.