# 3D-tekst: ekstrudert typografi gjort med smak

[Canonical HTML page](https://gradiently.design/nb/guide/3d-text-effect)

Ekstrudert tekst kan se ut som et gammelt butikkskilt eller som et nettbanner fra 2004. Forskjellen ligger i dybde, retning og farge, og alle tre er enkle å treffe når du kjenner reglene.

## The short version

- En 3D-teksteffekt, eller ekstrudering, gir flate bokstaver dybde ved å legge til solide sider som går i én retning.
- Ekstruderte bokstaver ser smakfulle ut når dybden er kort, rundt 5 til 10 prosent av bokstavhøyden, og sidene er en mørkere nyanse av bakgrunnen.
- Tunge, enkle skrifter tåler ekstrudering godt; tynne, detaljerte eller skråskrifter blir bare rotete.
- I CSS bygges en 3D-teksteffekt ved å stable mange text-shadow-lag, hvert forskjøvet ett steg lenger, uten uskarphet.
- Bruk ekstrudert tekst til noen få store ord, som en overskrift eller et skilt, aldri til hele setninger.

En **3D-teksteffekt** får flate bokstaver til å se solide ut ved å gi dem sider, som om hver bokstav var skåret ut av en kloss og sett litt fra siden. Gjort med smak bruker den en tung skrift, en kort dybde på rundt 5 til 10 prosent av bokstavhøyden, én fast retning og sidefarger hentet fra en mørkere tone av bakgrunnen. Gjort dårlig bruker den gradienter, blanke høylys, lange dybder og flere retninger samtidig. Hold det enkelt, så ser ekstrudert tekst ut som et selvsikkert skilt og ikke som utklippsgrafikk.

## Hva som får ekstrudert tekst til å se god eller billig ut

### Ser billig ut

- Dybden er lengre enn bokstavene er tykke
- Blanke høylys og skråkanter
- Sider i en farge som ikke henger sammen med designet
- Perspektiv som får bokstavene til å lene seg bakover
- Ekstrudering på en tynn skrift eller skråskrift
- Flere effekter stablet på ett ord

### Ser gjennomtenkt ut

- Kort dybde, rundt 5 til 10 prosent av høyden
- Flate, solide sider uten glans
- Sidefarge fra en mørkere tone av bakgrunnen
- Én retning, som regel ned og til høyre
- En tung, enkel skrift med åpne former
- Ekstruderingen er den eneste effekten

Ekstrudering har en lang historie på håndmalte skilt, sirkusplakater og platecovere fra 1970-tallet. Det er derfor den oppleves som varm og litt nostalgisk. Spill på det for kafeer, iskrem, merkevarer for barn, musikk og arrangementer. For en rolig, minimalistisk merkevare er det som regel feil stemme; [teksteffekter](https://gradiently.design/nb/guide/text-effects) hjelper deg å velge en som passer.

## Slik velger du dybde, retning og farge

### Dybde

Sidene bør være kortere enn bokstavstrekene er brede. På en overskrift på 160 px oppleves en dybde på 8 til 16 px som solid; ved 40 px begynner det å ligne en lang skygge, som er en annen stil. Liten tekst tåler ikke dybde i det hele tatt, så hold ekstrudering til overskriftsstørrelser.

| Overskriftsstørrelse | Dybde | Føles som |
| --- | --- | --- |
| 100 px | 5 til 8 px | Et lite løft fra siden |
| 160 px | 8 til 16 px | Et malt skilt |
| 240 px | 14 til 24 px | En kraftig plakat eller en emballasjetekst |
| Alle størrelser, dybde over 20 % | Lang | En lang skygge: en egen, grafisk stil |

Dybden som andel av bokstavhøyden avgjør om ekstrudert tekst leses som solid eller som en skygge.

### Retning

Velg én retning og hold på den i alle design. Ned og til høyre er mest naturlig, fordi vi gjerne oppfatter lyset som om det kommer ovenfra og fra venstre. Rett ned føles som stablede klosser. Opp og til venstre føles uvanlig, noe som kan fungere for ett enkelt utsagn, men som fort blir slitsomt.

### Farge

Tre toner gjør hele jobben: bokstavflaten, siden og bakgrunnen. Flaten bør stå i sterk kontrast til bakgrunnen. Siden ligger mellom dem, som regel en dyp nyanse av bakgrunnen eller av flaten. Når du henter den fra bakgrunnen, føles ekstruderingen belyst av det samme lyset.

- Flate: krem: #fff1d6
- Side: rust: #c2410c
- Bakgrunn: oransje: #f97316
- Side: dyp blå: #1e3a8a
- Bakgrunn: himmel: #60a5fa

To sett. Kremfargede bokstaver med rustfargede sider på oransje, eller kremfargede bokstaver med dypblå sider på himmelblått. I begge er siden en mørkere tone av bakgrunnen.

Et stående innlegg for en isbutikk med ordet Kuler stort over en varm gradient

Ett fett ord og en varm bakgrunn: den typen overskrift ekstruderte bokstaver passer til.

Et kvadratisk arrangementsinnlegg som annonserer en gatefest med tid og detaljer i mindre tekst

To korte ord på et kvadratisk innlegg. Flere ord, og dybden begynner å trenge seg på oppsettet.

## Slik lager du en 3D-teksteffekt i CSS

CSS har ingen egenskap for ekstrudering, men stablede skygger gjør jobben. Hvert lag med `text-shadow` er en solid kopi av bokstavene, forskjøvet én piksel lenger, uten uskarphet. Stable nok av dem, så smelter kopiene sammen til solide sider. En siste, mykere skygge under forankrer bokstavene på siden.

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

Åtte solide lag gir en ekstrudering på 8 px ned og til høyre, og en myk skygge til slutt setter den ned på bakgrunnen.

Å skrive dusinvis av lag for hånd er kjedelig. Noen få linjer JavaScript lager listen for hvilken som helst dybde, retning og farge, og du kan lime den inn i stilarket ditt.

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

Lim resultatet inn i `text-shadow`. Bruk steg på én piksel, så sidene forblir solide.

Behold ekstruderte overskrifter som ekte tekst på et nettsted, så de fortsatt kan søkes i, markeres og leses av skjermlesere. Skyggene endrer ikke den målte kontrasten mellom bokstav og bakgrunn, så sørg for at flatefargen holder alene. Foretrekker du en lettere, grafisk versjon, finner du én enkelt hard skygge uten lag i [tekstskygger](https://gradiently.design/nb/guide/text-shadow-alternatives); for ekte 3D med lyssetting og rotasjon er du over i WebGL, som [shader-gradienter](https://gradiently.design/nb/guide/shader-gradients) introduserer.

## Ekstruderte bokstaver steg for steg

1. **Velg to til fire ord** Et butikknavn, ett enkelt tilbud, en arrangementstittel. Ekstrudering trenger luft rundt seg.
2. **Sett dem i en tung skrift** En sans eller slab i black-vekt, eller en myk retro-serif. [Retroskrifter](https://gradiently.design/nb/guide/retro-fonts) foreslår noen med riktig varme.
3. **Velg farger for flate, side og bakgrunn** Sterk kontrast mellom flate og bakgrunn; siden en mørkere tone av bakgrunnen.
4. **Legg til dybde i én retning** Start på rundt 6 prosent av bokstavhøyden, ned og til høyre. Øk bare hvis det fortsatt ser flatt ut.
5. **Hold alt annet flatt** Detaljer, datoer og priser i en enkel, solid sans uten effekt.

## Ekstrudert tekst i Gradiently

Uttrekk er en av Gradiently sine bokstavbehandlinger: den gir hvilken som helst tekst i Studio solid dybde ned og til høyre, med sider tegnet i Markens egne farger og en bryter for dybde, så du slipper å stable lag. Marken bak designet flytter sitt roligste område bak ordene, så ekstruderte bokstaver forblir lesbare uansett hvordan bakgrunnen skifter over rammen. [Konturtekst](https://gradiently.design/nb/guide/outline-text) og andre behandlinger finner du i samme meny hvis ekstrudering viser seg å være for høylytt for budskapet.

## FAQ

### Hvordan lager jeg 3D-tekst i CSS?

Stable flere `text-shadow`-lag, hvert forskjøvet én piksel lenger i samme retning uten uskarphet, i en mørkere farge enn bokstavene.

### Hvilken skrift fungerer best til en 3D-teksteffekt?

Tunge, enkle skrifter som en sans i black-vekt, en slab eller en myk retro-serif. Tynne skrifter og skråskrifter blir rotete når de ekstruderes.

### Hvor dyp bør ekstrudert tekst være?

Rundt 5 til 10 prosent av bokstavhøyden. Mye dypere, og den leses heller som en lang skygge.

### Hvorfor ser 3D-teksten min billig ut?

Som regel for mye dybde, blanke høylys eller sidefarger som ikke henger sammen med designet. Bruk korte, flate sider i en mørkere tone av bakgrunnen.