3D-teksteffect: smaakvolle letters met diepte

Een 3D-teksteffect laat platte letters massief lijken door er zijkanten aan toe te voegen, alsof elke letter uit een blok is gezaagd en een beetje schuin wordt bekeken. Smaakvol gedaan gebruikt het een zwaar lettertype, een korte diepte van zo'n 5 tot 10 procent van de lettershoogte, één vaste richting en zijkanten in een donkerdere tint van de achtergrond. Slecht gedaan zijn het kleurverlopen, glanzende highlights, lange diepte en meerdere richtingen tegelijk. Houd het simpel en letters met diepte ogen als een zelfverzekerd uithangbord in plaats van als clipart.

Wat letters met diepte mooi of goedkoop maakt

Letters met diepte hebben een lange geschiedenis in met de hand geschilderde uithangborden, circusaffiches en platenhoezen uit de jaren zeventig. Daarom voelen ze warm en een beetje nostalgisch aan. Benut dat voor cafés, ijs, kindermerken, muziek en evenementen. Voor een rustig, minimalistisch merk is het meestal de verkeerde toon; teksteffecten helpt je er een te kiezen dat past.

Diepte, richting en kleur kiezen

Diepte

De zijkanten moeten korter zijn dan de letterstreken breed zijn. Bij een kop van 160 px oogt een diepte van 8 tot 16 px solide; bij 40 px lijkt het al op een lange schaduw, en dat is een andere stijl. Kleine tekst kan helemaal geen diepte dragen, dus bewaar dit voor koppen.

Richting

Kies één richting en houd die in elk ontwerp aan. Naar rechtsonder is het natuurlijkst, omdat we licht gewend zijn van linksboven te zien komen. Recht naar beneden voelt als gestapelde blokken. Naar linksboven voelt ongewoon, wat voor één statement kan werken maar snel vermoeit.

Kleur

Drie tinten doen al het werk: het letteroppervlak, de zijkant en de achtergrond. Het oppervlak moet sterk contrasteren met de achtergrond. De zijkant zit ertussen, meestal een diepe tint van de achtergrond of van het oppervlak. Haal je hem uit de achtergrond, dan lijkt de diepte door hetzelfde licht beschenen.

Een 3D-teksteffect maken in CSS

CSS heeft geen extrusie-eigenschap, maar gestapelde schaduwen doen het werk. Elke laag text-shadow is een solide kopie van de letters, een pixel verder verschoven, zonder blur. Stapel er genoeg en de kopieën smelten samen tot solide zijkanten. Een laatste, zachtere schaduw eronder zet de letters op de pagina neer.

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

Tientallen lagen met de hand schrijven is saai. Een paar regels JavaScript maken de lijst voor elke diepte, richting en kleur, die je in je stylesheet plakt.

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

Houd koppen met diepte op een website als echte tekst, zodat ze doorzoekbaar, selecteerbaar en voor schermlezers leesbaar blijven. De schaduwen veranderen het gemeten contrast tussen letter en achtergrond niet, dus zorg dat de oppervlaktekleur op zichzelf voldoet. Wil je een lichtere, grafische variant, dan staat een enkele harde schaduw zonder lagen in tekstschaduwen; voor echt 3D met licht en rotatie kom je in WebGL-gebied, waar shader-kleurverlopen een inleiding op geeft.

Stap voor stap letters met diepte maken

1. 1

   Kies twee tot vier woorden

   Een winkelnaam, één aanbieding, een evenementtitel. Diepte heeft ruimte eromheen nodig.

2. 2

   Zet ze in een zwaar lettertype

   Een sans of slab in de zwaarste snede, of een zachte retro-serif. Retrolettertypes noemt er een paar met de juiste warmte.

3. 3

   Kies kleuren voor oppervlak, zijkant en achtergrond

   Sterk contrast tussen oppervlak en achtergrond; de zijkant een donkerdere tint van de achtergrond.

4. 4

   Voeg diepte toe in één richting

   Begin op ongeveer 6 procent van de lettershoogte, naar rechtsonder. Vergroot alleen als het nog plat oogt.

5. 5

   Houd al het andere plat

   Details, data en prijzen in een gewone, solide sans zonder effect.

Letters met diepte in Gradiently

Extrusie is een van de lettertekenbehandelingen van Gradiently: het geeft elke tekst in de Studio solide diepte naar rechtsonder, met zijkanten in de eigen kleuren van de Mark en een regelaar voor de diepte, dus je hoeft geen lagen te stapelen. De Mark achter het ontwerp verplaatst zijn rustigste gebied achter de woorden, zodat letters met diepte leesbaar blijven hoe de achtergrond ook over het beeld verschuift. Het omtrekteksteffect en andere behandelingen staan in hetzelfde menu, mocht diepte te luid zijn voor je boodschap.