3D-tekst: udtrukne bogstaver med smag

En 3D-teksteffekt får flade bogstaver til at se solide ud ved at tilføje sider, som om hvert bogstav var skåret af en blok og set lidt fra siden. Gjort smagfuldt bruger den en tung skrifttype, en kort dybde på omkring 5 til 10 procent af bogstavhøjden, én ensartet retning og sidefarver i en mørkere tone af baggrunden. Gjort dårligt bruger den gradienter, blanke højlys, lange dybder og flere retninger på én gang. Hold det enkelt, så ligner udtrukket skrift et selvsikkert skilt frem for clipart.

Hvad får udtrukket tekst til at se godt eller billigt ud

Extrusion har en lang historie i håndmalede skilte, cirkusplakater og pladecovers fra 1970'erne. Det er derfor, den virker varm og en smule nostalgisk. Læn dig op ad det til caféer, is, børnebrands, musik og events. Til et roligt, minimalistisk brand er det som regel den forkerte stemme; teksteffekter hjælper dig med at vælge en, der passer.

Vælg dybde, retning og farve

Dybde

Siderne skal være kortere, end stregerne i bogstaverne er brede. På en overskrift på 160 px virker en dybde på 8 til 16 px solid; 40 px begynder at ligne en lang skygge, som er en anden stil. Lille tekst kan slet ikke bære dybde, så hold extrusion til overskriftsstørrelser.

Retning

Vælg én retning og hold den i alle designs. Nedad og til højre er mest naturligt, fordi vi er vant til at opfatte lyset som kommende fra oven og fra venstre. Lige nedad føles som stablede klodser. Opad og til venstre virker usædvanligt, hvilket kan fungere til ét enkelt udsagn, men bliver hurtigt trættende.

Farve

Tre toner gør hele arbejdet: bogstavets front, siden og baggrunden. Fronten skal kontrastere kraftigt med baggrunden. Siden ligger imellem, som regel en dyb nuance af baggrunden eller af fronten. Når du henter den fra baggrunden, virker extrusionen belyst af det samme lys.

Sådan laver du en 3D-teksteffekt i CSS

CSS har ingen extrude-egenskab, men stablede skygger gør arbejdet. Hvert lag af text-shadow er en solid kopi af bogstaverne, forskudt én pixel længere, uden sløring. Stabl nok af dem, og kopierne smelter sammen til solide sider. En sidste, blødere skygge nedenunder forankrer bogstaverne på siden.

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

At skrive dusinvis af lag i hånden er trættende. Et par linjer JavaScript producerer listen for enhver dybde, retning og farve, og du kan indsætte den i dit stylesheet.

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

Behold udtrukne overskrifter som ægte tekst på et website, så de forbliver søgbare, kan markeres og kan læses af skærmlæsere. Skyggerne ændrer ikke den målte kontrast mellem bogstav og baggrund, så sørg for, at frontfarven klarer sig alene. Foretrækker du en lettere, grafisk udgave, er en enkelt hård skygge uden lag beskrevet i tekstskygger; til ægte 3D med belysning og rotation er du ovre i WebGL, som shader-gradienter introducerer.

Sådan laver du udtrukne bogstaver trin for trin

1. 1

   Vælg to til fire ord

   Et butiksnavn, ét enkelt tilbud, en eventtitel. Extrusion har brug for luft omkring sig.

2. 2

   Sæt dem i en tung skrifttype

   En sans eller slab i sort vægt, eller en blød retro-serif. Retroskrifttyper foreslår et par stykker med den rette varme.

3. 3

   Vælg front-, side- og baggrundsfarver

   Stærk kontrast mellem front og baggrund; siden en mørkere tone af baggrunden.

4. 4

   Tilføj dybde i én retning

   Start omkring 6 procent af bogstavhøjden, nedad og til højre. Øg kun, hvis det stadig ser fladt ud.

5. 5

   Hold alt andet fladt

   Detaljer, datoer og priser i en almindelig, solid sans uden effekt.

Udtrukket skrift i Gradiently

Dybde er en af Lettering-behandlingerne i Gradiently: den giver enhver tekst i Studio solid dybde nedad og til højre, med sider tegnet i Markens egne farver og en drejeknap til dybden, så der ikke er lag at stable. Marken bag designet flytter sit roligste område om bag ordene, så udtrukne bogstaver forbliver læselige, uanset hvordan baggrunden skifter hen over billedet. Outline-teksteffekten og andre behandlinger ligger i samme menu, hvis extrusion viser sig at være for højlydt til budskabet.