Van kastontwerp naar interactieve webinterface

Introductie

In dit deel van het project vertaal je jouw kastontwerp naar een eenvoudige HTML- en CSS-interface. Je werkt met gekleurde blokken (<div>) om de vorm van je kast te benaderen en voegt hover-effecten toe om de interface interactiever te maken.

Doel van de opdracht

  • Leren werken met HTML-structuur en CSS-styling
  • Je RGB-kleuren correct toepassen in CSS voor weergave op scherm
  • Een eenvoudige interface bouwen met visuele feedback via :hover
  • Zien hoe je een statisch ontwerp omzet naar een digitale vorm

Stap 1 – Download het startbestand

Download het startbestand kast_start.html. Dit bevat een eenvoudige structuur van een kast met 6 vlakken: 

<div class="kast">
  <div class="vlak vlak1"></div>
  <div class="vlak vlak2"></div>
  <div class="vlak vlak3"></div>
  <div class="vlak vlak4"></div>
  <div class="vlak vlak5"></div>
  <div class="vlak vlak6"></div>
</div>

Stap 2 – Voeg jouw RGB-kleuren toe

Open het CSS-gedeelte (in het <style>-blok of een apart CSS-bestand) en pas de achtergrondkleuren aan met je gekozen RGB-waarden uit Illustrator. 

.vlak1 {
  background-color: rgb(255, 100, 0);
}

Stap 3 – Voeg hover-effecten toe

Maak de interface dynamisch door een eenvoudige :hover-effect toe te voegen. Bijvoorbeeld: een lichte vergroting of een schaduw. 

.vlak:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

Stap 4 – Experimenteer (optioneel)

  • Voeg border-radius toe aan een vlak
  • Zet een box-shadow op de kast of vlakken
  • Gebruik flexbox om de vlakken anders te positioneren
  • Pas de breedte en hoogte van de vlakken aan door percentage of pixels te gebruiken. Je hoeft je voorlopig geen zorgen te maken over responsiveness — vaste maten zijn hier prima.
  • Let op: gebruik je percentages, zorg er dan voor dat de begingroottes samen niet meer dan 100% per rij innemen. Bijvoorbeeld: twee vlakken van elk 48% met een beetje ruimte (gap) ertussen passen mooi op één rij.

Stap 5 – Presenteer

Toon je digitale kast aan je klasgenoten en leg uit:

  • Hoe je kleuren gekozen en toegepast hebt
  • Wat het hover-effect toevoegt aan de uitstraling
  • Of de kast volgens jou past in een digitaal interieur

Bouw stap voor stap. HTML en CSS lijken eenvoudig, maar zijn krachtige tools om jouw ontwerp tot leven te brengen.