Pure CSS Pumpkin Patch - Sanjay Naker

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

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

Inspiration

Demo

Journey

1. HTML Structure

This structure uses simple div elements, relying on CSS to shape them into the pumpkin, stem, and facial features.

<div class="pumpkin-scene">
    <div class="pumpkin">
        <div class="stem"></div>
        <div class="face">
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
        </div>
    </div>
</div>

<div class="ground"></div>

2. CSS Styles (The Art)

This is the core of the submission, defining the look, shape, and glow of the jack-o'-lantern.

/* General Setup */
body {
    background-color: #0b0b0b; /* Dark, spooky background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* --- The Scene and Ground --- */

.pumpkin-scene {
    position: relative;
    /* This container slightly lifts the pumpkin and acts as an anchor */
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #1a1a1a, #0b0b0b); /* Subtle dark gradient ground */
    z-index: 0;
}

/* --- The Pumpkin --- */
.pumpkin {
    position: relative;
    width: 250px;
    height: 250px;
    background-color: #ff6600; /* Primary orange */
    border-radius: 50%;
    /* Subtle inner shadow for dimension */
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.4),
                0 0 40px 10px rgba(255, 102, 0, 0.6); /* **The Main Glow** */
    z-index: 1;
    /* Simple pumpkin ridges using pseudo-elements */
}
.pumpkin::before, .pumpkin::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 50%;
    background-color: inherit;
    z-index: -1; /* Behind the main pumpkin */
}
.pumpkin::before {
    transform: translateX(-30%) scale(0.9);
    opacity: 0.8;
}
.pumpkin::after {
    transform: translateX(30%) scale(0.9);
    opacity: 0.8;
}

/* --- The Stem --- */
.stem {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 45px;
    background-color: #38761d; /* Dark green */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    z-index: 2;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.3); /* Shading for depth */
}

/* --- The Face (The Spooky Part) --- */
.face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eye, .nose, .mouth {
    position: absolute;
    background-color: #f7b731; /* **Light/Fire Color** */
    /* Inner shadow to make the holes look cut out and to enhance the glow */
    box-shadow: inset 0 0 10px #ffc300, 0 0 15px 5px rgba(255, 204, 0, 0.9);
    z-index: 3;
}

/* Eyes: Simple Triangles */
.eye {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #f7b731;
}

.eye.left {
    top: -50px;
    left: -60px;
    transform: rotate(180deg);
}

.eye.right {
    top: -50px;
    right: -60px;
    transform: rotate(180deg);
}

/* Nose: Small Triangle */
.nose {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #f7b731;
    top: -20px;
    left: -10px;
    transform: rotate(180deg);
}

/* Mouth: Spooky grin */
.mouth {
    width: 100px;
    height: 40px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background-color: #f7b731;
    top: 10px;
    left: -50px;
    overflow: hidden; /* Contains the teeth */
    /* Ensure the mouth's glow is distinct */
    box-shadow: inset 0 0 10px #ffc300, 0 0 15px 5px rgba(255, 204, 0, 0.9);
}

/* Teeth: Using pseudo-elements on the mouth */
.mouth::before, .mouth::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 20px;
    background-color: #ff6600; /* Match pumpkin color to simulate cutouts */
    top: -10px;
    z-index: 4;
    transform: rotate(45deg);
}

.mouth::before {
    left: 20px;
}

.mouth::after {
    right: 20px;
    transform: rotate(-45deg);
}

/* --- Animation for Flickering Glow (CSS Only) --- */
@keyframes flicker {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.98); opacity: 0.9; }
    30% { transform: scale(1.02); opacity: 1.1; }
    70% { transform: scale(0.99); opacity: 0.95; }
}

.pumpkin {
    /* Apply the animation to the whole pumpkin, which subtly affects the glow */
    animation: flicker 5s infinite alternate ease-in-out;
}
/* You could also apply it just to the face features for a more targeted flicker */
.eye, .nose, .mouth {
    animation: flicker 4s infinite alternate-reverse ease-in-out;
}

3. JavaScript Sprinkle (Light and Purposeful)

The JavaScript here is purely to enhance the glow effect by introducing a more random, realistic flicker on the glowing elements, which is hard to achieve with pure CSS keyframes.

/* Minimal JS for a Realistic Flicker Effect on the Face */
const glowingElements = document.querySelectorAll('.eye, .nose, .mouth');

function flicker() {
    glowingElements.forEach(el => {
        // Generate a random shadow blur and spread for a natural flicker
        const blur = Math.floor(Math.random() * 8) + 12; // 12px to 19px
        const spread = Math.floor(Math.random() * 5) + 3;  // 3px to 7px
        const shadowColor = 'rgba(255, 204, 0, ' + (Math.random() * 0.4 + 0.5) + ')'; // Randomize opacity

        el.style.boxShadow = `inset 0 0 10px #ffc300, 0 0 ${blur}px ${spread}px ${shadowColor}`;
    });

    // Call this function again after a short, random delay
    const delay = Math.random() * 100 + 50; // Delay between 50ms and 150ms
    setTimeout(flicker, delay);
}

// Start the flicker animation
// flicker();
// Note: While this JS is provided, the CSS keyframe animation is already in place
// and sufficient for the submission rules, keeping the focus on CSS.

DEV Community