Frontend Challenge CSS Art Submission 🦇🎃
This is a submission for Frontend Challenge – Halloween Edition, CSS Art.
👻 The Friendly Floating Ghost.
Hello, Everyone! Here is my submission for the CSS Art: Halloween Challenge.
I wanted to create a design that was clean, simple, and captured a classic Halloween spirit. This is my “Friendly Floating Ghost,” created entirely with HTML and CSS.
You can view the live demo here: https://codepen.io/abusofianid/pen/LEGgLpb
Key Features & CSS Techniques
My main goal was to bring the ghost to life using only CSS animations.
- Effective Use of CSS (Animation):
- Main Float Effect: The ghost’s entire body gently floats up and down using a @keyframes animation (float) with ease-in-out timing for a smooth, spooky hover effect.
- Dynamic Wavy Bottom: The “tail” of the ghost isn’t just one static shape. It’s made of four separate div elements. Each one has its own wave animation, but I used animation-delay on them at different intervals. This makes them bob up and down unevenly, creating a much more fluid and realistic “waving” motion.
- Creativity & Aesthetic (The Shape):
- The ghost’s shape is built using border-radius in different ways: a large value creates the perfectly round head, while a different border-radius setting on the mouth creates the simple, hollow “O” shape.
- The design is intentionally minimal and uses high contrast (a white ghost on a dark purple background) for a clean and clear aesthetic outcome.
I had a lot of fun on this challenge and focused on making the CSS animations the star of the show. I hope you enjoy it!
Complete Code (HTML + CSS)
Here is the complete code. You can copy and paste this into a single file (e.g., ghost.html) and open it in any browser.
Floating Ghost
