Experimenten delen - ambersr/i-love-web GitHub Wiki

Experimenten

In deze wiki deel ik al mijn experimenten die ik maak in Codepen.

Anchor positioning

Samenvatting:

  • Het artikel leert je hoe je met anchor positioning een floating focus state kan maken (CSS only !!!, want beter voor performance).
  • Met floating focus creëer je een fijn effect als je de website met keyboard navigeert.
  • Dit helpt jou als developer ook, om te bepalen of de volgorde van onderdelen met een focus state logisch zijn.
  • Met slechts 2 elementen kun je dit al maken:
  • Het element dat anchored (hier koppel je anchor-name aan)
  • Het element dat als eerste de anchor ontvangt (hier koppel je position-anchor aan)
  • Tot slot leer je ook hoe je dit PE kan maken (en voor de oplettende lezer kom je hier ook een shout-out naar Krijn Hoetmer tegen)

Codepen: https://codepen.io/ambersr/pen/wBMvXPV

Gedeeld met mijn medestudenten in Teams: