# 3D-tekst: udtrukne bogstaver med smag

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

Udtrukket skrift kan se ud som et gammelt skilt eller et webbanner fra 2004. Forskellen er dybde, retning og farve, og alle tre er nemme at ramme, når du kender reglerne.

## The short version

- En 3D-teksteffekt, også kaldet extrusion, giver flade bogstaver dybde ved at tilføje solide sider, der løber i én retning.
- Udtrukne bogstaver ser smagfulde ud, når dybden er kort, omkring 5 til 10 procent af bogstavhøjden, og siderne er en mørkere nuance af baggrunden.
- Tunge, enkle skrifttyper egner sig godt til extrusion; tynde, detaljerede eller skriveskrifter ender som rod.
- I CSS bygges en 3D-teksteffekt ved at stable mange text-shadow-lag, hvert forskudt et trin længere, uden sløring.
- Brug udtrukket skrift til få store ord, som en overskrift eller et skilt, aldrig til hele sætninger.

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

### Ser billigt ud

- Ser gennemtænkt ud
- Dybde, der er længere end bogstavernes tykkelse
- Blank glans og skråkanter
- Sider i en farve uden sammenhæng med designet
- Perspektiv, der får bogstaverne til at læne sig væk
- Extrusion på en tynd skrifttype eller en skriveskrift

### Flere effekter stablet på ét ord

- Kort dybde, omkring 5 til 10 procent af højden
- Flade, solide sider uden glans
- Sidefarve fra en mørkere tone af baggrunden
- Én retning, som regel nedad og til højre
- En tung, enkel skrifttype med åbne former
- Extrusion som den eneste effekt

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](https://gradiently.design/da/guide/text-effects) 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.

| Overskriftsstørrelse | Dybde | Føles som |
| --- | --- | --- |
| 100 px | 5 til 8 px | Et diskret løft fra siden |
| 160 px | 8 til 16 px | Et malet skilt |
| 240 px | 14 til 24 px | En dristig plakat eller emballagelinje |
| Enhver størrelse, dybde over 20 % | Lang | En lang skygge: en særskilt, grafisk stil |

Dybden som andel af bogstavhøjden afgør, om udtrukket tekst virker solid eller som en skygge.

### 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.

- Front: creme: #fff1d6
- Side: rust: #c2410c
- Baggrund: orange: #f97316
- Side: dyb blå: #1e3a8a
- Baggrund: himmel: #60a5fa

To sæt. Cremefarvede bogstaver med rustfarvede sider på orange; eller cremefarvede bogstaver med dybblå sider på himmelblå. I begge er siden en mørkere tone af baggrunden.

Et portrætopslag fra en isbutik med det enkelte ord Scoops stort over en varm gradient

Ét fedt ord og en varm baggrund: den slags overskrift, udtrukne bogstaver passer til.

Et kvadratisk eventopslag, der annoncerer en gadefest med tidspunkt og detaljer i mindre skrift

To korte ord på et kvadratisk opslag. Flere, og dybden begynder at fylde for meget i layoutet.

## 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.

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

Otte solide lag giver en extrusion på 8 px nedad og til højre, og en blød sidste skygge sætter den på underlaget.

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.

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

Indsæt resultatet i `text-shadow`. Brug pixeltrin på én, så siderne forbliver solide.

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](https://gradiently.design/da/guide/text-shadow-alternatives); til ægte 3D med belysning og rotation er du ovre i WebGL, som [shader-gradienter](https://gradiently.design/da/guide/shader-gradients) introducerer.

## Sådan laver du udtrukne bogstaver trin for trin

1. **Vælg to til fire ord** Et butiksnavn, ét enkelt tilbud, en eventtitel. Extrusion har brug for luft omkring sig.
2. **Sæt dem i en tung skrifttype** En sans eller slab i sort vægt, eller en blød retro-serif. [Retroskrifttyper](https://gradiently.design/da/guide/retro-fonts) foreslår et par stykker med den rette varme.
3. **Vælg front-, side- og baggrundsfarver** Stærk kontrast mellem front og baggrund; siden en mørkere tone af baggrunden.
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. **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](https://gradiently.design/da/guide/outline-text) og andre behandlinger ligger i samme menu, hvis extrusion viser sig at være for højlydt til budskabet.

## FAQ

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

Stabl flere `text-shadow`-lag, hvert forskudt én pixel længere i samme retning uden sløring, i en mørkere farve end bogstaverne.

### Hvilken skrifttype fungerer bedst til en 3D-teksteffekt?

Tunge, enkle skrifttyper som en sans i sort vægt, en slab eller en blød retro-serif. Tynde skrifttyper og skriveskrifter bliver rodede, når de trækkes ud.

### Hvor dyb skal udtrukket tekst være?

Omkring 5 til 10 procent af bogstavhøjden. Meget dybere, og den virker som en lang skygge i stedet.

### Hvorfor ser min 3D-tekst billig ud?

Som regel for meget dybde, blanke højlys eller sidefarver uden sammenhæng med designet. Brug korte, flade sider i en mørkere tone af baggrunden.