CSS-lab · Hero's

Outline-stack hero

Een hero waarin één kopwoord vijf keer gestapeld staat: alleen de middelste regel gevuld, de rest als outline die zacht heen en weer drijft. Pure CSS.

Gemiddeld
Pure CSS
MIT-licentie
-webkit-text-stroke
:nth-child()
@keyframes
calc() met custom properties
CSS grid

HTML

<section class="osh-hero">
  <div class="osh-content">
    <p class="osh-kicker">Merkidentiteit & webdesign</p>
    <h2 class="osh-title">Durf op te vallen in een zee van hetzelfde</h2>
    <p class="osh-intro">Een merk dat fluistert, wordt overstemd. Wij ontwerpen identiteiten en websites met karakter, van eerste schets tot laatste pixel.</p>
    <div class="osh-actions">
      <a href="#" class="osh-btn osh-btn--solid">Plan een kennismaking</a>
      <a href="#" class="osh-btn">Onze aanpak</a>
    </div>
  </div>
  <div class="osh-stack" aria-hidden="true">
    <span>Durf</span>
    <span>Durf</span>
    <span>Durf</span>
    <span>Durf</span>
    <span>Durf</span>
  </div>
</section>

CSS

/* Outline-stack hero: één woord, vijf lagen */
.osh-hero {
  --bg: #0C0C0D;
  --ink: #F9F8F6;
  --accent: #C6FF3D;
  --stroke: #F9F8F6;
  --drift: 18px;
  --speed: 7s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: 100%;
  min-height: 520px;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px);
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}

.osh-kicker {
  margin: 0 0 16px;
  font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.osh-title {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.osh-intro {
  max-width: 44ch;
  margin: 18px 0 28px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(249, 248, 246, .78);
}

.osh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.osh-btn {
  display: inline-flex;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 700 15px/1 system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.osh-btn--solid {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.osh-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.osh-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Stapel: vijf regels, alleen de middelste gevuld */
.osh-stack {
  display: grid;
  justify-items: center;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(56px, 9vw, 124px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  user-select: none;
}

.osh-stack span {
  --d: 0;
  color: transparent;
  -webkit-text-stroke: 2px var(--stroke);
  animation: osh-drift var(--speed) ease-in-out infinite alternate;
}

/* Afstand tot het midden bepaalt opacity en uitslag */
.osh-stack span:nth-child(1) { --d: -2; opacity: .18; }
.osh-stack span:nth-child(2) { --d: -1; opacity: .45; }
.osh-stack span:nth-child(3) { color: var(--accent); -webkit-text-stroke: 0; }
.osh-stack span:nth-child(4) { --d: 1; opacity: .45; }
.osh-stack span:nth-child(5) { --d: 2; opacity: .18; }

@keyframes osh-drift {
  from { transform: translateX(calc(var(--d) * var(--drift) * -1)); }
  to { transform: translateX(calc(var(--d) * var(--drift))); }
}

/* Fallback zonder text-stroke: gewoon gevulde regels */
@supports not (-webkit-text-stroke: 1px black) {
  .osh-stack span { color: var(--stroke); }
}

@media (max-width: 760px) {
  .osh-hero { grid-template-columns: 1fr; }
  .osh-stack { order: -1; font-size: clamp(44px, 14vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .osh-stack span { animation: none; }
  .osh-btn { transition: none; }
}

Wat het is en waar je het gebruikt

De outline-stack hero zet één krachtig woord centraal en herhaalt het vijf keer onder elkaar. Alleen de middelste regel is gevuld in acid lime; de regels erboven en eronder zijn alleen omlijnd en worden steeds transparanter. De buitenste regels drijven langzaam tegen elkaar in, waardoor het woord lijkt te trillen als een echo. Links staat een volwaardige hero met kicker, kop, intro en twee knoppen.

Dit werkt goed voor merken die durven: een studio, een festival, een productlancering of een campagne met één kernwoord. Het gestapelde woord is pure decoratie; de inhoud staat in de echte kop ernaast, zodat zoekmachines en screenreaders de boodschap gewoon oppikken.

Zo werkt het

Outline-tekst: de regels krijgen color: transparent met -webkit-text-stroke: 2px var(--stroke). Alleen span:nth-child(3) krijgt een vulling en geen rand.
Afstand tot het midden: elke regel krijgt via :nth-child() een getal --d van -2 tot 2. De opacity daalt naarmate een regel verder van het midden staat.
Drift: de keyframes osh-drift gebruiken translateX(calc(var(--d) * var(--drift))). Omdat --d boven het midden negatief en eronder positief is, bewegen de regels als een schaar tegen elkaar in, terwijl het middelste woord stil blijft staan.
Strakke stapel: een line-height van .8 en display: grid met justify-items: center plakken de regels tegen elkaar.
Responsive: de layout is een twee-koloms grid; onder 760 px schuift de stapel met order: -1 boven de tekst. Lettergroottes schalen met clamp().

Aanpassen

De variabelen staan op .osh-hero:

--bg en --ink: achtergrond en tekst.
--accent: de vulling van de middelste regel en de primaire knop.
--stroke: de kleur van de outlines.
--drift: hoe ver de regels uitwijken. Op 0px staat de stapel stil.
--speed: de duur van één drift-beweging.

Een ander woord kiezen? Vervang de tekst in alle vijf de spans. Korte woorden van drie tot zes letters werken het best; bij langere woorden verlaag je de maximale waarde in de clamp() van .osh-stack.

Toegankelijkheid en browsersupport

De stapel heeft aria-hidden="true", zodat het woord niet vijf keer wordt voorgelezen. De knoppen zijn echte links met een zichtbare :focus-visible-outline en de tekst voldoet ruim aan de contrasteisen. Met prefers-reduced-motion: reduce staat de drift stil. -webkit-text-stroke werkt ondanks de prefix in Chrome, Edge, Safari en Firefox. Voor oudere browsers zit er een @supports not-fallback in die de regels gewoon vult; de opacity-trap blijft dan zichtbaar.

Verder lezen

Deze hero leunt op de principes uit ons artikel over brutalistisch webdesign: grote typografie, harde contrasten en eerlijk materiaal. Wil je een complete site in deze stijl, kijk dan bij webdesign.

Licentie & credit

Gratis te gebruiken onder de MIT-licentie, ook in commerciële projecten. Een link terug is niet verplicht, maar wordt enorm gewaardeerd:

Credit-link

<a href="https://manifestdigital.nl/css-snippets/outline-stack-hero/">Outline-stack hero door Manifest Digital</a>

Wil je deze stijl op maat, gekoppeld aan je merk en met scroll-animaties? Bekijk interactief webdesign →

Meer hero's

Nog meer gedurfde CSS

Hero's · GemiddeldBrutalist split-screen heroBekijk & kopieer code

Hero's · GemiddeldKinetische typografie-heroBekijk & kopieer code

Hero's · GevorderdGrid-reveal heroBekijk & kopieer code

Alle CSS-snippets →

Outline-stack hero

Durf op te vallen in een zee van hetzelfde

Wat het is en waar je het gebruikt

Zo werkt het

Aanpassen

Toegankelijkheid en browsersupport

Verder lezen

Nog meer gedurfde CSS

Rauw ontwerp. Strakke code.

Websites die bewegen en raken

Achter elk raster zit een plan