Frontend Challenge: Space Trucking.

I am still working on this, but wanted to try building in public. The codepen window cuts off parts of the image so click the .5x button.

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

The Challenge was space so I started with the background for space. I didn't want pure black so played with some black, blue and purple background: linear-gradient. I ended up with something more pleasing than stark #000 black.

Demo

Here's my codepen. I may switch to just posting the code here when I finish.

The codepen window cuts off parts of the image so click the .5x button.

Journey

I reused some code from when the summer challenge where I drew sunset at the beach. The color gradient in the sun, reminded me of the red spot on Jupiter.

I added a spot by playing with more colors. I didn't want to do the actual solar system and wanted a more stylized version of space. Initially I wanted planets overlapping.

When I made the yellow planet the white gave it more depth. so I added a highlight over the Jupiter like planet.

Next I added a wormhole opening that allowed ships or space trucks to enter the galaxy. The wormhole is an oval with transform: skew to give the hole some depth.

9.14.24 update. I reduced the spread of the drop-shadow around both planets. Added more color to the space trucks by adding a trailer with and a accent color. So they are now two toned.

Wrap up

I really like these frontend challenges. It's always nice to show some creativity in projects.