Home > Web Front-end > CSS Tutorial > Frontend Challenge: Space.

Frontend Challenge: Space.

DDD
Release: 2024-09-14 06:18:32
Original
371 people have browsed it

Frontend Challenge: Space.

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 to enter the galaxy. The wormhole is an oval with transform: skew to give the hole some depth.

Wrap up

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

The above is the detailed content of Frontend Challenge: Space.. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template