Its the first week of this project so starting today (26 feb.) we got an introduction about what CSS is all about and what you can accomplish with it. During This first week it's the first fase of thinking about what you want to make and start coding. Because of the many different things you can do with CSS we also had a small assignment we had to do the first day en present the day after. Also we have a guest for 2 weeks: Nils Binder who will help and teach us some cool/crazy or weird CSS tricks we haven't seen before.
| What day? | What is done that day? |
|---|---|
| Monday 26/02 |
|
| Tuesday 27/02 |
|
| Friday 01/03 |
|
| Idea 1 | Idea 2 | Idea 3 |
|---|---|---|
 |
 |
 |
| Idea 1 is supposed to be a DJ booth that has buttons for a light show, steam-machine and many more stuff | Idea 2 is a Seaport which has containers and you are supposed to stack them on top of each other | Idea 3 is a claw machine that has a party mode |
I have chosen to pick idea 3 because I think it has a more WOW effect to me if I can build this. And I also think that if i can make this in 3D it is even more impressive.
In this first week I think I had a bit of a slow start but at the end of the week I did had something to show. I was a bit slowed down by my thought process because I didn't knew where to start. Eventually started with something small like the little "Party switch" this for me was a small succes and on Friday I got some even better inspiration from Sanne. After the team session we had i knew exactly what to do which was a nice idea to think.
- Just code, and figure it out later
- Sketch it when you don't know how it must look like
- Teachers are there for help
For this week I don't have a lot of fixes to do or adjustments to make, but did have some nice feedback which I can use as inspiration for the project.
- Enable sound?
- use
<audio autoplay></audio>& with CSS Display none and block
- use
- Testing with codepens
- make small tests, then apply to project
- Look at
animation-play-state: running; /* or paused */for controlling buttons with an object
In week 2 I began to get a feeling of what the end result is going to look like (See codepen 3 in "All small tests with codepen"). But before I was there I had some help from Sanne en did lots of research and came with some great codepens of others who have helped me to get where I am now. I am really proud of myself this week for the steps that I have made and thing that I have learned. for example, I have never worked with CSS and 3D perspective, the clamp() method (which has its problem in my case) and in general the creativity you can experience with CSS, almost nothing is impossible. Never the less, I'm starting to understand why CSS is sometimes better for certain things than JS.
| What day? | What is done that day? |
|---|---|
| Monday 04/03 |
|
| Tuesday 05/03 |
|
| Friday 08/03 |
|
- 3D box with animation play state
- 3D test box from Amit sheen
- 3D box own variant with edits and tweeks
On Monday we had a lot of workshops so working on the project that day was a bit hard. But these workshops gave a lot of inspiration that I can use for my project. The workshops I had signed into with Sanne where especially very helpful since I need to create a 3D claw machine and making shapes instead of using images is way nicer and also cool to learn.
What helped me get further in this project was definitely searching for other 3D work to understand how you can do this with CSS. Codepen has a lot of users who make incredible stuff so that where I have learned the most from I think.
- 3D perspective is cool
- test test and test
- Chat GPT is useless when something creative must be made
During the team session on Friday I was really happy with what I could show, but knew that there where some things that aren't optimized. Joppe, a student in the class also wanted something with a claw machine and noticed that when clicking left even if the claw is on it's "home base" it still invisibly, animates to the let which it is not supposed to do. Sanne therefore made a codpen for him which was also helpful for me.
- fix clamp() method with "codepen for Joppe"
- Start building the claw machine
- functionality first then appearance
- just make the claw first and then in 3D
This week did not start well. During a football game I broke my right collarbone (sleutelbeen) and so working with 1 arm (which is also my "bad" arm) is annoying and slows down the project by at least 5X times haha. No in all crazyness, going to school is not really working since I have a lot of pain with movements and also have to travel over 2.5 hrs each day, so working from home on the project it is!
This week is a week where I visually want to make a lot of progress. I already have the "main" functionalities done so starting on the claw machine it self in step 1 and after that I want to create some "silly" stuff as Vasilis said in his lecture in the previous week
| What day? | What is done that day? |
|---|---|
| Monday 11/03 |
|
| Tuesday 12/03 |
|
| Thursday 14/03 |
|
This week was a bit of a though one. Having to work with an arm I usually use for secundaire stuff was pretty hard but I think that i can be pretty proud on how the appearance of my project has changed in a week. I also learned (Sanne showed is this during the team session) that drawing specific things you want to make really helps with coding. Look at the example beneath:
| Overall sketch | -> Step 1 | -> Step 2 |
|---|---|---|
 |
 |
 |
By Visualizing the certain parts I need, I can code the claw in a much faster time. So for example with the sketches I made, I knew how I wanted to code to look like:
<section>
<div> /* top of claw */
<span></span> //front side
<span></span> //right side
<span></span> //back side
<span></span> //left side
</div>
<div> /* rope that is being scaled up and down when "GET" buttons is pressed */
<span></span> //rope
</div>
</section>
etc.- sketching helps with coding
- even with 1 arm you can make beautiful things
Because I did not go to school I have not received any feedback or tips but do have some fixes to do.
- Completing the "shell" of the claw machine
- adding coin and animation of coin inert
- party mode must be completed as well with a disco ball
- adding items inside the claw machine
- "GET" buttons must only be clickable 1 time
| What day? | What is done that day? |
|---|---|
| Monday 18/03 |
|
| Wednesday 20/03 |
|
| Friday 19/04 |
|
This was the last week for this project. Since I Broke my collarbone I have to do a "herkansing" (resit) as they say in Dutch which will be on the 6th of May. So Looking back at the previous week I wanted to do some last things. Some dots on the "i" as Sanne would have said. I really enjoyed figuring out how to work in 3D so makeing some components for the title area was really cool to do and one of the last tings aswell. Also te retry function I adden when clicking on the "get" button is someting im proud of because this makes sure you can play it again because it resets the game (by refreshing te page).
| Overall sketch | -> Step 1 |
|---|---|
 |
 |
Something I still had to do and had forgotten was a container query. With some help of sanne i made it work and understood how this could benefit in readabillity of the CSS code. Beneath you wil see how I implented the container query.
<label role="switch">
<input type="checkbox" name="party-mode" value="party-mode" /> <!-- adding contaier query via value attr.-->
</label>html:has([value="party-mode"]:checked) {
--party-mode: true;
}
@container style(--party-mode: true) {
label:has(input:checked) ~ section:nth-of-type(1),
label:has(input:checked) ~ section:nth-of-type(2) {
display: none;
}
label:has(input:checked) ~ section:nth-of-type(3) {
display: block;
top: 0;
&::before {
content: "";
position: absolute;
z-index: 1;
top: 20px;
left: 20px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: silver;
background-image: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
background-size: 40px;
animation: disco-ball-shimmer 2s linear infinite;
}
& div {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
top: 40px;
left: 40px;
width: 8px;
height: 300vw;
background: #fff;
pointer-events: none;
transform-origin: top center;
animation: disco-lights-mode-1 2s infinite alternate cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
}
& div:first-of-type {
&::before {
box-shadow:
0px 0px 30px 10px #73ad42,
0px 0px 150px 10px #73ad42;
animation-duration: 3s;
}
&::after {
box-shadow:
0px 0px 30px 10px #ee6862,
0px 0px 150px 10px #ee6862;
animation-name: disco-lights-mode-2;
animation-duration: 1.5s;
}
}
& div:nth-of-type(2) {
&::before {
box-shadow:
0px 0px 30px 10px #fabe0e,
0px 0px 150px 10px #fabe0e;
animation-name: disco-lights-mode-3;
animation-duration: 1.5s;
}
&::after {
box-shadow:
0px 0px 30px 10px #016583,
0px 0px 150px 10px #016583;
animation-name: disco-lights-mode-4;
animation-duration: 4s;
}
}
}
}- how container queries can help with readabillity
So seeing that this was the last week to qwork on the project. There isn't mucht to fix after this right? Wrong! Because a project is never done they say. However, during this project I really enjoyed working with CSS, looking for projects who have cool stuff and seeing if this would fit within my project, all the bizar, cool and interesting codepens and many more. I do have some stuff I could add if I had the time:
- Making the lasers in 3D
- Being able to grab a suprise from the claw machine
- When moving the buttons from ⬆️⬇️⬅️➡️ the sticks on teh clawmachine should move aswell