`This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.
Inspiration
I wanted to create an interactive and visually engaging representation of our Solar System using CSS Art and HTML. The inspiration comes from my fascination with space and the beauty of celestial bodies. Through this project, I aimed to combine minimalistic design with interactive elements that encourage users to explore and learn about each planet in the Solar System.
Demo
Live Demo: Explore the Solar System
https://solar-system-explorer-css-art.vercel.app
You can also see a preview of the project in the embedded code editor below:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art
Journey
In this challenge, I decided to blend creative CSS design with interactive JavaScript functionality to make the experience more dynamic. Here’s a breakdown of the process:
Designing the planets: I used a combination of CSS Grid and hover animations to create planet cards that provide fun interactivity. The planet names and key information are dynamically presented.
Interactive Hover Effects: Each planet has a glowing hover effect, inspired by the way celestial objects emit light. I also added a spinning animation when hovering to simulate orbital movement.
Modals for More Info: When a planet is clicked, a modal pops up with additional information, creating an immersive learning experience. This makes the app both interactive and informative.
CSS Art: Instead of using any external images, the entire solar system art was built using pure CSS. I focused on shapes, colors, and glow effects to simulate the look and feel of planets.
Responsiveness: The layout is fully responsive, adapting to all screen sizes to ensure that users can explore the solar system from any device.
What I learned:
The challenge of making CSS Art interactive using simple JavaScript.
Implementing advanced hover effects and animations to bring static elements to life.
The power of CSS Grid and Flexbox to create responsive and clean layouts.
What’s next?
I plan to add more detailed planet information and potentially implement an interactive 3D view for the planets to simulate a closer-to-reality experience.
Enhancing the modal to display real-time data such as planet rotation speed and temperature variations.`
Top comments (0)