Hero-secties opmaken

Een hero-sectie is het grote visuele gedeelte bovenaan een webpagina. Vaak bevat een hero een achtergrondafbeelding, een titel, een korte inleidende tekst en soms ook een knop of link.

Omdat de hero meestal als eerste zichtbaar is, speelt die een belangrijke rol in de eerste indruk van een website.

Een goede hero combineert beeld, typografie en lay-out op een duidelijke en aantrekkelijke manier.

1. Een eenvoudige hero met achtergrondafbeelding

Een hero start vaak met een groot blok met een achtergrondafbeelding. Met background-size: cover zorg je ervoor dat de afbeelding het volledige vlak vult.

<header class="hero-basic"></header>

.hero-basic {
  height: 18rem;
  background-image: url("afbeelding.jpg");
  background-size: cover;
  background-position: center;
}

cover zorgt ervoor dat het volledige vlak gevuld wordt. Een deel van de afbeelding kan daardoor buiten beeld vallen.

2. Een overlay met een gradient

Tekst op een foto is niet altijd goed leesbaar. Daarom wordt vaak een overlay toegevoegd: een kleurlaag of gradient bovenop de afbeelding.

In dit voorbeeld gebruiken we een linear-gradient() samen met de afbeelding in background-image.

.hero-overlay {
  height: 18rem;
  background-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("afbeelding.jpg");
  background-size: cover;
  background-position: center;
}

De gradient staat vooraan, de afbeelding achteraan. Zo wordt de onderkant donkerder en blijft tekst beter leesbaar.

3. Tekst onderaan plaatsen met flexbox

In veel hero-secties staat de tekst niet bovenaan, maar onderaan in beeld. Met display: flex is dat eenvoudig op te lossen.

<header class="hero-flex">
  <h1 class="hero-flex-text">
    <span class="hero-flex-first-line">Beeld</span>
    <span class="hero-flex-second-line">
      Twijfel &amp; <span class="hero-flex-italic">Constructie</span>
    </span>
  </h1>
</header>

.hero-flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 20rem;
  background-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("afbeelding.jpg");
  background-size: cover;
  background-position: center;
}

.hero-flex-text {
  margin-bottom: 2rem;
  color: white;
}

Door justify-content: flex-end te gebruiken, komt de inhoud onderaan in de hero te staan. Met align-items: center wordt de tekst horizontaal gecentreerd.

4. Typografie in een hero

In een hero wordt vaak gewerkt met verschillende lettergroottes en lettergewichten. Zo ontstaat meer hiërarchie tussen de verschillende regels van de titel.

.hero-flex-first-line {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1;
  display: inline-block;
}

.hero-flex-second-line {
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 200;
  display: block;
}

.hero-flex-italic {
  font-style: italic;
}

In dit voorbeeld zie je dat:

• de eerste regel groter en zwaarder is
• de tweede regel dunner is
• één woord cursief wordt gezet met een extra span

Gebruik een span wanneer je een deel van een tekstregel apart wil opmaken.

5. Een hero met een gebogen onderkant

Soms krijgt een hero een decoratieve, afgeronde onderkant. CSS kan geen negatieve border-radius maken, maar we kunnen dit effect wel simuleren met een pseudo-element.

We plaatsen een extra vorm onderaan de hero met ::after. Die vorm is breder dan de hero en wordt gecentreerd.

.hero-curve {
  position: relative;
  overflow: hidden;
}

.hero-curve-text {
  margin-bottom: 3rem;
  color: white;

  /* Zorgt dat tekst boven de boog blijft */
  position: relative;
  z-index: 2;
}

.hero-curve::after {
  content: "";
  position: absolute;

  /* Plaats in het midden */
  left: 50%;
  transform: translateX(-50%);

  bottom: -5rem;
  width: 120%;
  height: 8rem;

  background: white;

  /* Vorm van de boog */
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;

  z-index: 1;
}

De boog is breder dan de hero en wordt gecentreerd met left: 50% en transform: translateX(-50%).

Waarom werkt dit?

• De hero krijgt position: relative
• De boog wordt gemaakt met ::after
• De boog is breder dan de hero (120%)
• We centreren de boog met left: 50% en transform
• De tekst blijft zichtbaar door een hogere z-index

Zonder transform: translateX(-50%) staat de boog niet mooi in het midden.

Besluit

Een goede hero-sectie combineert meerdere CSS-technieken:

• background-image voor de foto
• linear-gradient() voor een overlay
• flexbox voor de plaatsing van de tekst
• span-elementen voor typografische accenten
• eventueel een pseudo-element voor een decoratieve onderkant

In de praktijk wordt een hero vaak gebruikt om de bezoeker meteen een duidelijke eerste indruk te geven van de inhoud van een pagina.