This content originally appeared on DEV Community and was authored by Alfredo Barrera
This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
Inspiration
This challenge explores how far modern CSS—gradients, clip-path, filters, and custom properties—can carry an illustrative scene without raster assets or SVG. The objective was an accessible, performant nocturnal vignette with restrained motion that reads well across viewports and respects user preferences. Interactivity is deliberately minimal, serving theming and state transitions while keeping the composition and lighting the main focus.
Demo
Live demo: https://halloween-edition.vercel.app/
What I made
An accessible CSS‑first Halloween scene: glowing pumpkin with candle flicker, moon + stars, parallax hills, haunted house, animated bats, drifting fog, a witch flyby, a floating ghost, lightning “storm mode,” and a shooting star. JavaScript is used sparingly for small interactions and controls, and the scene respects prefers-reduced-motion.
Animations
- Candle flicker: layered flames with offset keyframes
- Stars twinkle: global opacity pulse
- Bats: wing flaps + gentle horizontal loops
- Fog: slow drifting bands for depth
- Witch flyby: long, subtle parallax path
- Ghost: buoyant bob with soft blur
- Lightning: brief blend-mode flashes in storm mode
- Shooting star: one-off diagonal streak
Journey
- Process: sketched layers → semantic HTML scaffold → CSS variables for palette/timings → gradients/clip‑paths for shapes → fine‑tuned keyframes and easing → added tiny JS for controls.
- Learned:
- Layering gradients and clip‑paths yields rich forms without images.
- CSS custom properties make live color theming trivial (pumpkin recolors on selection).
- Small flicker offsets sell “organic” motion more than big transforms.
- Accessibility scales: role="img" + label and aria-hidden on decor work well here.
- Proud of: the spider drop + shooting star on pumpkin click—it’s a tiny, delightful surprise.
Challenges
- Balancing motion and readability: kept movements subtle and added a global pause button.
- Performance: avoided heavy filters; used small, layered effects and sparse DOM.
- Minimal markup vs. expressive shapes: leaned on gradients, borders, and clip‑paths.
What’s next
- Optional audio with a visible, default‑off toggle
- More palettes and a “randomize night” button
- Export a short cover MP4/GIF
- Cleanly extract scene pieces into reusable snippets
Accessibility
- Decorative elements are
aria-hidden. - Scene container uses
role="img"with a descriptive label. - Animations reduce automatically for users who prefer reduced motion.
Files / notes
-
index.html: semantic scene + control buttons -
styles.css: full art/animation; variables in :root -
script.js: storm, pause, palette, spider, and shooting star interactions
👻 Thanks for reading—and happy Halloween! 👻
This content originally appeared on DEV Community and was authored by Alfredo Barrera
Alfredo Barrera | Sciencx (2025-10-30T08:03:55+00:00) 🎃 Halloween Edition 🎃. Retrieved from https://www.scien.cx/2025/10/30/%f0%9f%8e%83-halloween-edition-%f0%9f%8e%83-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.