CSS Piano

MIDI controller in pure CSS, zonder JS

CSS Piano, een MIDI controller gebouwd met alleen CSS

Alleen CSS, complexe animaties en responsieve schaal per octaaf

Voor deze opdracht bouwde ik een MIDI player geïnspireerd op AKAI. De regel was simpel, alleen CSS gebruiken. Ik heb diep gewerkt met calc() en round() voor schaal per octaaf, moderne selectors zoals :has(), variabele fonts en nette responsive breakpoints.

Bekijk live site Bekijk GitHub
  • CSS only
  • 2 weken
  • Minor.Web.Design&Development
  • Schoolproject
Mockup en details van de CSS Piano interface

Kernpunten

Responsiveness: 1 octaaf op mobiel, 2 op desktop, 4 op grote schermen, zonder halve toetsen door round() en calc().

Interacties: keys met hover en micro animatie, drumpads en joystick aangestuurd met :has() en CSS variabelen.

Typografie: variabele fonts met animatie, nette hiërarchie.

Lessen: veel gewerkt met CSS variabelen, grid en flex, selectors opschonen. Belangrijk inzicht, begin simpel, breid daarna uit.

NS Erfbelasting

Volgend Project