CSS-lab · Tekst-effecten

Outline-naar-fill tekst

Grote outline-links die bij hover en focus van links naar rechts vollopen met een cobalt-violet gradient. Ideaal voor een fullscreen menu of een lijst met diensten.

Gemiddeld
Pure CSS
MIT-licentie
-webkit-text-stroke
background-clip: text
background-size transition
CSS counters
::before

HTML

<nav class="oft-nav" aria-label="Voorbeeldmenu">
  <ul class="oft-list">
    <li><a href="#" class="oft-link" aria-current="page">Webdesign</a></li>
    <li><a href="#" class="oft-link">Branding</a></li>
    <li><a href="#" class="oft-link">Animatie</a></li>
  </ul>
</nav>

CSS

/* Outline-naar-fill: links lopen vol bij hover en focus */
.oft-nav {
  --ink: #0C0C0D;
  --fill-a: #2E5BFF;
  --fill-b: #9B5CFF;
  --stroke: 2px;
  --speed: .7s;
}

.oft-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: oft;
}

.oft-link {
  position: relative;
  display: inline-block;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s ease;
}

/* Nummer 01, 02, 03 via een counter */
.oft-link::before {
  counter-increment: oft;
  content: "0" counter(oft);
  content: "0" counter(oft) / "";
  position: absolute;
  top: .35em;
  left: 100%;
  margin-left: .5em;
  font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  color: var(--ink);
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--ink);
}

.oft-link:hover {
  transform: translateX(.08em);
}

.oft-link:focus-visible {
  outline: 3px solid var(--fill-a);
  outline-offset: 6px;
}

/* Outline + vulling, alleen als de browser beide kan */
@supports ((background-clip: text) or (-webkit-background-clip: text)) and (-webkit-text-stroke: 1px black) {
  .oft-link {
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--ink);
    background: linear-gradient(90deg, var(--fill-a), var(--fill-b)) 0 0 / 0% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size var(--speed) cubic-bezier(.7, 0, .2, 1), transform .3s ease;
  }

  .oft-link:hover,
  .oft-link:focus-visible,
  .oft-link[aria-current="page"] {
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oft-link { transition: none; }
  .oft-link:hover { transform: none; }
}

Wat het is en waar je het gebruikt

Dit effect toont grote woorden eerst alleen als omlijning. Beweeg je eroverheen of tab je ernaartoe met het toetsenbord, dan loopt het woord van links naar rechts vol met een gradient van cobalt naar violet. De actieve link is al gevuld, zodat je direct ziet waar je bent. Een klein mono-nummer naast elk woord geeft de lijst een redactioneel ritme.

Je gebruikt het voor een fullscreen menu, een overzicht van diensten, een portfolio-index of een footer met grote links. Het werkt het best met korte woorden in een zware letter, zoals hier met "Arial Black".

Zo werkt het

Outline: de link krijgt color: transparent en -webkit-text-stroke: var(--stroke) var(--ink). Je ziet dus alleen de rand van de letters.
Vulling als achtergrond: een linear-gradient() staat als achtergrond met background-size: 0% 100% en no-repeat, links uitgelijnd. Met background-clip: text is die achtergrond alleen binnen de letters zichtbaar.
Vollopen: bij :hover, :focus-visible en [aria-current="page"] gaat de background-size naar 100% 100%. De transition met een stevige cubic-bezier() geeft het een snelle, zelfverzekerde vulbeweging.
Nummering: een CSS-counter (counter-reset en counter-increment) zet via ::before een nummer als 01, 02 en 03 naast elk woord. De HTML blijft schoon.
Kleine duw: bij hover schuift het woord met translateX(.08em) een fractie op, wat het geheel tastbaarder maakt.

Aanpassen

De variabelen staan op .oft-nav:

--ink: de kleur van de outline en de nummers.
--fill-a en --fill-b: begin- en eindkleur van de vulling. Geef ze dezelfde waarde voor een egale vulling.
--stroke: de dikte van de outline. Bij kleinere tekst werkt 1px beter.
--speed: de duur van het vollopen.

Toegankelijkheid en browsersupport

Het zijn echte links in een <nav> met een eigen aria-label. De focusstijl is meer dan de vulling alleen: er staat ook een duidelijke outline omheen. Outline-tekst heeft minder visuele massa dan gevulde tekst. Gebruik het daarom alleen op grote formaten, zoals hier vanaf 40 px. De nummers gebruiken content: ... / "", zodat screenreaders ze waar mogelijk overslaan. Het effect staat in een @supports-blok: zonder ondersteuning voor background-clip: text of -webkit-text-stroke zie je gewone, gevulde links. Met prefers-reduced-motion: reduce wisselt de vulling direct, zonder animatie. Dit werkt in alle actuele browsers.

Verder lezen

Hover-effecten op links en knoppen volgen dezelfde regels: duidelijk, snel en ook bruikbaar met het toetsenbord. Meer daarover lees je in ons artikel over CSS-knoppen en hover-effecten. Zoek je een menu of site met zulke typografie, 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-fill-tekst/">Outline-naar-fill tekst door Manifest Digital</a>

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

Meer tekst-effecten

Nog meer gedurfde CSS

Tekst-effecten · GemiddeldMarker-highlightBekijk & kopieer code

Tekst-effecten · BeginnerLetter-golfBekijk & kopieer code

Tekst-effecten · GemiddeldTypewriter met knipperende cursorBekijk & kopieer code

Alle CSS-snippets →