Weekly Nerd 7 – Julia Miocene

CSS = meer dan alleen styling

Julia Miocene liet ons zien hoe je met alleen CSS kunstwerken en animaties kunt maken – zonder JavaScript, zonder SVG. Alles is opgebouwd uit simpele HTML-elementen zoals <div>, gecombineerd met slimme CSS-technieken.

Hoe haar CSS-animaties zijn opgebouwd

Een personage bestaat uit geneste div-blokken: een hoofd bevat twee ogen, en die ogen bevatten weer pupillen – allemaal losse divs. Door elk element position: absolute; te geven binnen een relatief gepositioneerde ouder, positioneert Julia elk stukje precies waar ze het wil hebben.

Voorbeeldstructuur:

<div>  <!-- HEAD -->
  <div>  <!-- EYES -->
    <div><div></div></div>  <!-- EYE 1 + PUPIL -->
    <div><div></div></div>  <!-- EYE 2 + PUPIL -->
  </div>
  <div></div>  <!-- NOSE -->
</div>

CSS-technieken

::before en ::after pseudo-elementen
position: absolute en relative
transform, rotate, scale
clip-path, border-radius, gradients
transform-origin voor het instellen van draaipunten

Transform-origin uitgelegd

Een van de krachtigste tools volgens Julia is transform-origin: hiermee bepaal je vanaf welk punt een element draait of schaalt. Denk aan een arm die beweegt vanuit de schouder, of een klokwijzer die draait vanuit het midden. Bijvoorbeeld:

div {
  transform-origin: bottom center;
}

Hierdoor blijft de onderkant van het element op z’n plek terwijl de rest roteert. Ideaal voor armen, benen of wijzers!

Persoonlijke reflectie

De talk van Julia was ontzettend inspirerend. Ze bewijst dat je met een sterke basiskennis van CSS al waanzinnig veel kunt doen – als je creatief genoeg bent. Alles wat ik zag voelde ergens bekend, maar haar manier van denken is echt uniek. Ze daagt je uit om opnieuw te kijken naar wat je al kent.

Na haar presentatie ben ik extra gemotiveerd om zelf creatief aan de slag te gaan met pure CSS. Het is moeilijk, maar zeker niet onmogelijk. Ik ga binnenkort zeker experimenteren met deze technieken!

“Je hebt geen JavaScript nodig om iets te laten bewegen – alleen wat verbeelding en heel veel divs.”