Ontwerp

Originele plaatje:

---

Favicon:

➔ doorzichtige achtergrond

---

https://carcassonneapp.com/

---

Mooi lettertype voor perkament-stijl:

EB Garamond — gratis, meest gebruikt in dit soort fantasy/historische stijl
Cormorant Garamond — populair in moderne webdesign met perkamentlook
Crimson Text — vergelijkbaar, veel gebruikt in game-UI’s

De perkamentstijl bestaat uit 3 lagen:

1. Achtergrondkleur + textuur

css

background-color: #d4b483; /* warme okergele basiskleur */
background-image: url('parchment-texture.png'); /* ruw papier-textuur */
background-blend-mode: multiply;

Of zonder afbeelding, puur met CSS gradients:

css

background: radial-gradient(ellipse at center,
  #e8d5a3 0%,
  #c9a96e 60%,
  #a07840 100%
);

2. Lettertype

Een oldstyle serif met Renaissance-uitstraling:

css

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
 
font-family: 'EB Garamond', Georgia, serif;
font-size: 1.1rem;
line-height: 1.7;
color: #2a1a0a; /* donkerbruin i.p.v. zwart */

3. De kaart/scroll zelf (vignette + randen)

css

.parchment {
  max-width: 600px;
  margin: 2rem auto;
  padding: 3rem;
  border-radius: 4px;
  box-shadow:
    inset 0 0 80px rgba(100, 60, 0, 0.4),  /* vignette binnenin */
    0 8px 30px rgba(0, 0, 0, 0.5);          /* slagschaduw eronder */
  border: 1px solid #8a6030;
}

Het geheim zit in de combinatie:

• Warme bruingele achtergrond
• inset box-shadow voor de donkere randen (geeft het verouderde, verkreukelde gevoel)
• Donkerbruin tekstkleur (nooit puur zwart)
• Een oldstyle serif font

Zie voorbeeld:

Transclude of parchment_demo

➔ kan ik in claude plaatsen

De vier ingrediënten die het effect maken:

Font — EB Garamond van Google Fonts, gratis. De oldstyle-vormen en schuine assen geven direct de historische sfeer.

Vignette — inset box-shadow met meerdere lagen. De binnenste schaduw verdonkert de randen, waardoor het midden lichter lijkt en het geheel verouderd oogt.

Vlekken — gestapelde radial-gradient op de achtergrond. Elke gradient zit op een andere hoek en geeft de ongelijkmatige verkleuring van echt perkament.

Dropletter — ::first-letter pseudo-element dat de eerste letter vergroot. Klassiek boektypografisch middel.

---

Gerafelde randen

Hier is de prompt die dit resultaat reproduceert:

---

Maak een HTML-widget met een perkamentsrol-stijl die er als volgt uitziet:

Structuur: twee lagen over elkaar via position: absolute / position: relative:

• Laag 1 .parchment-bg — alleen de achtergrond, krijgt de SVG-filter voor gescheurde randen
• Laag 2 .parchment-text — tekst, z-index: 2, geen filter zodat tekst scherp blijft

Achtergrond (laag 1):

• background-color: #d9ba84
• Meerdere radial-gradient voor perkamentvlekken op de hoeken
• box-shadow met inset voor vignette-effect
• SVG feTurbulence + feDisplacementMap filter voor gescheurde randen (baseFrequency: 0.04 0.065, scale: 14, seed: 3, numOctaves: 4)

Typografie:

• Font: EB Garamond via Google Fonts
• Tekstkleur: #2a1505 (donkerbruin, nooit zwart)
• Dropletter via ::first-letter: font-size: 3.8rem, float: left
• Titel gecentreerd met letter-spacing: 0.08em
• Decoratieve scheidingslijn: — ✦ — in #7a5020
• Footer in italic met border-top in semi-transparant bruin

Omgeving:

• Buitenste wrapper: background: #1a1207 (donker) zodat de gescheurde randen zichtbaar zijn
• Maximale breedte perkament: 520px, gecentreerd

Transclude of parchment_torn_clean_text2

---