Ik heb ervoor gekozen om met CSS een interactieve rubiks kubus te gaan maken. Ik heb hiervoor gekozen, omdat ik hier de meeste uitdaging in zag zitten. Mijn grootste uitdaging in deze opdracht zal vooral alles goed op zn plek krijgen en zo efficient mogelijke code te schrijven.
- 3D-transform/perspective
- Custom Properties
- Grid
- Calc
- Selectoren
- Flexbox
- Animation
- Interaction
Check mijn commits om mijn code proces gedetaileerd te kunnen volgen.
In week 1 ben ik op advies van Sanne begonnen om een enkel blokje te maken. Om namelijk een kubus te maken heb ik 26 van deze blokjes nodig. Ik heb er dus voor gekozen om 26 <ul> elementen te maken met daarin 6 <li> elementen erin. Deze list items zijn dan de zijdes van een blokjes. De lists zijn dan de blokjes. Ik heb hiervoor wel wat hulp gehad, onder anderen de codepen van Sanne waar al een begin is gemaakt. Deze was heel nuttig om een goed beeld te krijgen hoe ik de kubus kan gaan maken. Nadat ik 26 blokjes had gemaakt, heb ik ervoor gezorgd dat ze gecentreerd staan. Vanuit dit middelpunt wil ik de blokjes gaan positioneren door middel van transform: translate en rotate.
- Het maken van een 26 blokjes
- Gebruik van 3d en perspective
- Ik vond het lastig om een beeld te krijgen hoe ik de kubus uiteindelijk ging maken
- Dat je in CSS ook variabelen kan aanmaken en aanroepen, net als in JavaScript.
In week 2 kwam ik erachter dat ik de blokjes van mijn kubus niet kan draaien, omdat ik niet in layers heb gewerkt. Het is namelijk handiger als ik dmv translate begin met de bottom layer en zo omhoog ga. Op deze manier kan ik makkelijker een zijde selecteren en zo draaien. Op de afbeelding hierboven is te zien hoe dit is gegaan. Ik heb deze week ook ervoor gezorgd dat mijn code een stuk netter en overzichtelijker is. Hierdoor is het voor mij makkelijker te volgen als ik iets wil aanpassen.
- Ik heb nu een volledige kubus die goed in elkaar zit.
- Gebruik gemaakt van custom properties.
- Het selecteren van een zeide ging nogal lastig, hier heb ik wel hulp voor gevraagd.
- Hoe je goed gebruik kan maken van de custom properties en deze kan aanpassen dmv checkboxes.
In week 3 ben ik aan de slag gegaan met de controls van de kubus. Ik heb de controls gepositioneerd door een grid te gebruiken. Voor de controls om de kubus heb ik een grid-template-columns: repeat(5, 1fr) en grid-template-rows: repeat(5, 1fr) meegegeven waardoor er een grid ontstaat van 5 bij 5. Vervolgens heb ik elke label die in de grid zit gepositioneerd met een grid-area. Voor de kleine controls heb ik een grid-template-columns: repeat(3, 1fr) en grid-template-rows: repeat(2, 1fr) meegegeven zodat er een grid komt van 3 breedt en 2 hoog. Ook hierin zijn de labels gepositioneerd dmv grid-area. Om de kubus responsive te maken heb ik gebruik gemaakt van de vmin eenheid.
- Kubus is interactief
- Kubus is responsive
- Controls zitten in een grid
- Het maken van het grid had ik erg veel moeite mee, dit was vooral veel finetunen.
- vmin eenheid
- grid-area
- de repeat in grid-template-rows/columns
In de laatste week was het vooral de bedoeling dat ik wat extraatjes erbij kon doen. Zo heb ik ervoor gezorgd dat het nu mogelijk is om een afbeelding te tonen op een zijde van de kubus. Dit heb ik gedaan door op de ::before van een <li> een background-image te zetten. Dit moet dan alleen op een zijde gebeuren. Ik heb een zijde kunnen selecteren door ul 1, 2, 3, 10, 11, 12, 19, 20 en 21 te selecteren. Per blokje geef ik de background-image een andere background-position. Zo komt er uiteindelijk op een zijde een afbeelding. Ook heb ik een knop toegevoegd dat de kubus transparant is. Vervolgens heb ik nog een crazy modus toegevoegd. Als je op de knop klikt dan krijgt de <main> een repeating-radial-gradient. Deze animeer ik door de background-size van 100% naar 200% te laten gaan in een loop. Dit moet een trippy gevoel krijgen.
- Toevoegen van extra interacties
- Afbeelding op een zijde van kubus krijgen
Deze week had ik niet echt dingen die minder goed gingen
- Hoe je een afbeelding op een zijde van een kubus kan krijgen
- Huilsessies
- Sanne 't Hooft
- Pepijn
- Bas
- Grid generator