🛻CSS Art: Smoothie Food Truck

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

💠I was not sure I was going to enter this challenge at first, because I was not feeling inspired. I do not like to force things. Then I started to think a little outside of the normal. I remembered Space Fruit, a food vendor that is a favorite of mine to find at music festivals. Nothing beats an ice cold smoothie topped with frozen fruit bits on a sweltering, hot day. When you see Space fruit, you stop, and make a direct cut to their truck. You do not hesitate. So, after some nostalgia, I was feeling motivated remembering the days when I used to vend, selling my art and being an active member of the festival community.

Demo

Change preview zoom to .5

Here is a screenshot of it working on codepen, it might not be great on some devices:

• I start each idea generally by blocking out the approximate size and shape of the object I want to add.
• I use gradients, box shadows, and layering to add depth and dimension.
• A smattering of javascript was used to randomly place stars and have them twinkle.
• Found a way to imitate an LED strip with some fancy background gradient patterns.
• Pushed myself to create a wrinkling effect on the tablecloth to imitate fabric.

Journey

⭐ I made a timelapse for you guys, so I'll leave that as my journey! It's sometimes hard to imagine how much work someone puts into something without evidence. A video will communicate this pretty quickly, plus it is also satisfying to see progress happen so quickly. The biggest challenge was getting the window cut out in the back of the food truck, so you could see the stars on the other side, just like in real life.

Code

Github Repo: cssart