This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.
Inspiration
This submission was inspired by celebrating people's success on a chat. One space related emoji used to acknowledge their wins is the rocket emoji.
Demo
Journey
This challenge provided an excellent learning experience. The task was to create a rocket emoji using CSS and HTML, which involved crafting shapes that are not typically seen on websites.
I started by breaking the image into 8 parts:
- Body
- Nose Cone
- Window
- Left Fin
- Middle Fin
- Right Fin
- Nozzle
- Flame
The Body is a div element that is rotated 45 degrees with a border radius added to each corner to give it a rounded appearance. This element contains the Nose Cone and the Window. The Nose Cone is a div element with a border radius of 50% which makes it a circle. It is positioned at the top of the Body. The Window is similar to the The Nose Cone but it has a border to give it a window frame and it is positioned near the center of the Body. The Left Fin is a div element with a clip-path attribute. Using this attribute I can define a polygon, which allows me to draw the fin. The Middle Fin is a div element with rounded corners. The Right Fin similar to the Left Fin but it is inverted. The Nozzle is a rectangular div element with rounded corners. The Flame is a square div element with varying border radius for each corner. A border with a deeper color was added to Flame to give it more of a flame appearance. Animation was added to Flame which simply changes the size and opacity every 2 seconds indefinitely. The background is a series of radial-gradient attributes used to create random white circles of varying sizes at different locations.
I learned some new CSS techniques, including how to create animations and polygons. In the future, I hope to add even more animations to the rocket.
Top comments (0)