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

Inspiration

For my submission, I went for something a little different than the jack-o-lanterns 🎃 and spooky things 👻 we often think about during Halloween. I wanted to create something that captures the essence of what Halloween really means, not just costumes and candy, but remembrance.

Thus, I created a beautiful webpage featuring a flickering candle on a lovely wooden table. It's a simple, peaceful symbol of what Halloween, AKA All Hallows' Eve, really means: the night we remember all those who came before us, and who have now journeyed onward. A candle is such a simple object, yet it carries deep symbolism: light in the darkness 🕯️, warmth 🔥, and memory. Translating that into a webpage allowed me to combine some artistic creativity with CSS and web animation.

Demo

My website is built mostly with CSS, with just a tiny sprinkle of JavaScript to enhance the flicker. You can see the project live with my use of GitHub Pages:

This project was primarily CSS-driven, which aligns perfectly with the CSS Art challenge guidelines. Some of the techniques I explored included:

• Gradients and layering: Creating the soft glow of the candle flame required multiple layers and subtle gradients to mimic light diffusion.
• Animations and keyframes: The flicker effect is achieved by animating opacity, transform, and shadow offsets to make the flame feel alive.
• Minimal JavaScript: Just enough to add a slight randomness to the flicker, with the star of the show being still pure CSS ⭐.

This is probably my favourite piece of CSS:

/* Flame with inner core and outer glow */
.flame {
    position: absolute;
    top: -200px; 
    left: 50%;
    transform: translateX(-50%);
    width: 24px;  
    height: 300px; 
    background: radial-gradient(circle at 50% 30%, #fff6c8 0%, #ffd35b 18%, rgba(255,153,34,0.95) 42%, rgba(255,100,20,0.6) 70%, transparent 71%);
    border-radius: 50% 50% 40% 40%;
    filter: blur(0.6px);
    z-index: 4;
    mix-blend-mode: screen;
    transform-origin: bottom center;
    animation: flame-flicker 1.2s infinite;
}

The website is also responsive, meaning if you change the dimensions, the candle will adjust accordingly:

Journey

I'm one of those visual learners, I love seeing things actually work. This is one of the reasons I love CSS so much: you change something and something visibly changes. Even after years of working with CSS, this project reminded me how powerful CSS can be for creating fun, realistic effects. I experimented with colours and layering, and the result feels very much alive. It's not perfect and doesn't replace my physical candle, but working with this CSS shows the power of effects.

This project also reinforced a concept that something small (such as a candle, or a small change in the CSS), can be more impactful than overloading a scene with too many details.

CSS artwork

CSS Art isn’t always about flashy visuals. It can be about storytelling through code. By combining design sensibilities with CSS techniques, you can create something that resonates emotionally while still impressing technically.

If you want to explore it yourself, check out the code in my GitHub repo and the live demo powered by GitHub Pages. For anyone entering the CSS Art challenge, remember: let your creativity guide your styles, but keep the CSS at the heart of the project:

mishmanners / candle-webpage

Celebrating All Hallow's Eve

This project creates a beautiful webpage featuring a flickering candle on a lovely wooden table. The candle symbolises remembrance, showing why we celebrate Halloween, AKA All Hallow's Eve.

This is a submission for the DEV Frontend Challenge.

Setup Instructions

1. Clone the Repository:

   git clone <repository-url>
   cd candle-webpage

2. Open the Project: Open the src/index.html file in your web browser to view the webpage.

3. Modify Styles: You can customise the appearance of the candle and text by editing the src/css/styles.css file.

4. Flickering Effect: The flickering effect of the candlelight is controlled by the src/js/main.js file. You can adjust the animation parameters as needed.

View on GitHub

Happy Halloween, and happy coding 🕯️🎃.