DEV Community

Cover image for Frontend Challenge: Space Trucking.
Chris Jarvis
Chris Jarvis

Posted on

8 1 1 1 1

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
fred_functional profile image
Fred Functional •

Is the .5x button necessary for viewing other frontend challenges or just for this one due to the image cutoff? Great work on those color selections, by the way!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay