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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay