3D-texteffekt: extruderade bokstäver med smak

En 3D-texteffekt får platta bokstäver att se massiva ut genom att lägga till sidor, som om varje bokstav vore sågad ur ett block och sedd lite från sidan. Gjord med smak använder den ett tungt typsnitt, ett kort djup på ungefär 5 till 10 procent av bokstavshöjden, en enda genomgående riktning och sidofärger som är en mörkare ton av bakgrunden. Gjord dåligt använder den gradienter, blanka högdagrar, långa djup och flera riktningar samtidigt. Håll det enkelt, så ser extruderad text ut som en självsäker skylt och inte som clipart.

Vad som får extruderad text att se bra eller billig ut

Extrudering har en lång historia på handmålade skyltar, cirkusaffischer och skivomslag från 1970-talet. Den historien är orsaken till att den känns varm och lite nostalgisk. Luta dig mot det för caféer, glass, barnvarumärken, musik och evenemang. För ett lugnt, minimalistiskt varumärke är det oftast fel röst; texteffekter hjälper dig välja en som passar.

Så väljer du djup, riktning och färg

Djup

Sidorna ska vara kortare än bokstävernas streck är breda. På en rubrik på 160 px ser ett djup på 8 till 16 px massivt ut; 40 px börjar likna en lång skugga, vilket är en annan stil. Liten text klarar inget djup alls, så håll extruderingen till rubrikstorlekar.

Riktning

Välj en riktning och behåll den i alla designer. Nedåt och åt höger är det mest naturliga, eftersom vi tenderar att uppfatta ljuset som kommande uppifrån och från vänster. Rakt nedåt känns som staplade block. Uppåt och åt vänster känns ovant, vilket kan fungera för ett enskilt budskap men blir snabbt tröttsamt.

Färg

Tre toner gör hela jobbet: bokstavens framsida, sidan och underlaget. Framsidan ska kontrastera starkt mot underlaget. Sidan ligger mellan dem, oftast en djup nyans av underlaget eller av framsidan. Tar du den från bakgrunden känns extruderingen belyst av samma ljus.

Så gör du en 3D-texteffekt i CSS

CSS har ingen extrudera-egenskap, men staplade skuggor gör jobbet. Varje text-shadow-lager är en massiv kopia av bokstäverna, förskjuten en pixel längre, utan oskärpa. Stapla tillräckligt många så smälter kopiorna samman till massiva sidor. En sista, mjukare skugga under förankrar bokstäverna på sidan.

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

Att skriva dussintals lager för hand är tröttsamt. Några rader JavaScript tar fram listan för valfritt djup, riktning och färg, och du klistrar in den i din stilmall.

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

Behåll extruderade rubriker som riktig text på en webbplats, så att de förblir sökbara, markerbara och läsbara för skärmläsare. Skuggorna ändrar inte den uppmätta kontrasten mellan bokstav och bakgrund, så se till att framsidans färg klarar kraven på egen hand. Föredrar du en lättare, grafisk variant finns en enda hård skugga utan lager i textskuggor; för äkta 3D med ljussättning och rotation är du inne på WebGL, som shadergradienter introducerar.

Så gör du extruderad text steg för steg

1. 1

   Välj två till fyra ord

   Ett butiksnamn, ett enda erbjudande, en evenemangstitel. Extrudering behöver luft runt sig.

2. 2

   Sätt dem i ett tungt typsnitt

   En sans eller slab i svart snitt, eller en mjuk retroserif. Retrotypsnitt föreslår några med rätt värme.

3. 3

   Välj färger för framsida, sida och underlag

   Stark kontrast mellan framsida och underlag; sidan en mörkare ton av underlaget.

4. 4

   Lägg till djup åt ett håll

   Börja runt 6 procent av bokstavshöjden, nedåt och åt höger. Öka bara om det fortfarande ser platt ut.

5. 5

   Låt allt annat vara platt

   Detaljer, datum och priser i en enkel, massiv sans utan effekt.

Extruderad text i Gradiently

Extrudering är en av behandlingarna för Lettering i Gradiently: den ger all text i Studion ett massivt djup nedåt och åt höger, med sidor ritade i Markens egna färger och ett reglage för djupet, så det finns inga lager att stapla. Marken bakom designen flyttar sitt lugnaste område bakom orden, så extruderad text förblir läsbar hur bakgrunden än skiftar över bilden. Konturtexteffekten och andra behandlingar finns i samma meny om extrudering visar sig vara för högljudd för budskapet.