DEV Community

Cover image for Trick or Treat: A Spooky CSS Diorama with a Few... Surprises
Reza Purnama
Reza Purnama

Posted on

Trick or Treat: A Spooky CSS Diorama with a Few... Surprises

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

Hey everyone, and Happy Halloween!

For this CSS art challenge, I didn't want to just make a static image. I wanted to build a living 'diorama' a small, spooky scene you could actually play with.

As the title suggests, there are both "Tricks" and "Treats" hidden inside. This isn't just for looking it's for interacting.

👻 Go Ahead, Click Everything!

The scene is packed with... surprises. See if you can find them all:

  • Try double-clicking the 'Trick or Treat' neon sign... if you dare.
  • Click on the ghosts to see a special apparition.
  • Make the Jack-o'-lantern glow! Click it as many times as you can and watch it.

💻 The "Treat": How It's Made

This is my "treat" (the technical details) behind the "tricks" (the interactive scares).

Pure CSS

This is a CSS Art challenge, so the entire visual scene is built with 100% pure CSS. The structure is just simple, semantic HTML. Everything you see from the glowing moon and drifting fog to the multi layered pumpkin is crafted with CSS.

Advanced CSS "Tricks"

I used a few modern CSS techniques to bring the scene to life:

  • Non-Destructive Carving: The Jack-o'-lantern's face isn't an image file. It's "carved" in real-time using clip-path: polygon(...) with an evenodd fill rule. This "cuts" the face shapes out of the pumpkin segments, allowing the glow from behind to shine through.
  • Atmospheric Lighting: All the glowing effects (the moon, the neon sign, the candle flames, and the pumpkin's inner light) are a combination of box-shadow and filter: blur(). There are no images used for light.
  • Scene Depth: The scene has a 3D feel thanks to z-index layering. The trees, ghosts, and fog are all positioned at different "depths," with the ones further back having a filter: blur() applied to create a sense of distance.
  • Living Animation: @keyframes are the soul of the scene. They are used for:
    • float: The gentle bobbing of the ghosts.
    • flicker & flame-flicker: The unstable light of the neon sign and candles.
    • pulse: The rhythmic glow of the pumpkin.
    • drift: The slow-moving layer of fog across the ground.

JavaScript as the "Spark"

While CSS builds the entire world, a small amount of vanilla JavaScript acts as the spark of life to make it truly interactive. It is purely a supporting tool to enhance the CSS.

It's only used to:

  • Listen for addEventListener clicks on the various elements.
  • Toggle CSS classes (like .fly-away or .shake for the sign).
  • Play the HTML5 <audio> elements for background music and... other sounds.
  • Manage the simple logic for the double click timer and the pumpkin's increasing glow intensity.

No libraries, no frameworks. Just a sprinkle of JS to empower the CSS core.

🔗 Links

A Final Thought

If you are skilled in writing anything, always remember that your content will be served to your clients or visitors. Remember that UI/UX is very important; impress them with your work.

This was a blast to put together. I hope you enjoy it! Let me know in the comments if any of the surprises... got you.

Top comments (0)