{ "source_file": "0930", "source_platform": "Dev.to", "author": "amananandrai", "title_listed": "Spooky Scene with Gothic Castle and Grim Reaper CSS Art for Frontend Challenge - Halloween Edition", "keywords": "", "domain": "数据处理", "content_type": "深度技术解析", "is_paid_flag": "否", "url": "https://dev.to/amananandrai/halloween-challenge-ak1", "publish_date": "2025-10-23", "corpus_stage": "", "notes": "", "id": "0240583ef3f9", "collected_at": "2026-10-02T14:01:53", "title": "Spooky Scene with Gothic Castle and Grim Reaper CSS Art for Frontend Challenge - Halloween Edition - DEV Community", "body_markdown": "This is a submission for\nFrontend Challenge - Halloween Edition, CSS Art\n._\nHey everyone! As the clock winds down on the Dev.to\nFrontend Challenge - Halloween Edition\n, I wanted to share my journey in creating a spooky, yet charming, Halloween scene purely with HTML and CSS. It's been a wild ride, a mix of pure frustration, \"aha!\" moments, and a lot of box-shadow tweaking.\nInspiration\nI was inspired to create a \"paper cutout\" style halloween scene with layered elements, subtle shadows, and the vibrant yet muted color palette. I loved creating the central castle, the glowing pumpkin, the mischievous cat, and especially the creepy reaper on the right. My goal was clear: create this entire scene, capturing that papercraft feel, using only HTML and CSS. No img tags, no external assets – just pure code.\nDemo\nThe image is made to be viewed in full screen on a Desktop, so please check it on a desktop.\nCodePen:\nDemo Image Fullscreen\nJourney\nThis is my first submission for any Dev Challenge. I am a newbie at CSS art so the first step was to go through different CSS arts on Codepen and Google search and take some elements from them.\nHere's a little peek into my journey, the (many) challenges I faced, and how I brought this haunted castle to life.\nThe Foundation: Setting the (Spooky) Scene\nEvery good scene needs a backdrop. I started simple:\nThe Sky\n: A linear-gradient from a dark navy to a deep purple.\nThe Ground\n: A simple, dark shape at the bottom.\nThe Moon\n: A radial-gradient for the color, border-radius: 50% for the shape, and a box-shadow for that eerie glow. The \"glow\" itself is animated to pulse gently.\nThe first real beast was the castle. This wasn't one div. This was a monster of position: absolute, z-index, and pseudo-elements.\nThe Structure:\nI built it piece by piece. A main body\n(.castle-main)\nand three towers\n(.castle-tower)\n.\nThe Challenge:\nThe z-index! For a while, my center tower was behind the main building, and the bridge was floating in the sky. It took a lot of tweaking to get the layers right so everything sat perfectly on the ground line.\nThe Details:\nThe battlements (the tooth-like things on top) aren't individual divs. That would be a nightmare. Instead, I used a repeating-linear-gradient on a pseudo-element (::before) to create the pattern. The windows use a flickering animation on their opacity and box-shadow to look like candlelight.\nThe Main Characters: From Pumpkins to Reapers\nWith the set built, I needed to populate it.\nFirst up: the Jack-o'-Lantern.\nThis was fun! The body is a radial-gradient and a funky border-radius to make it squat. The face elements are simple clip-path triangles, but the mouth was a cool trick. To get the \"stitched\" look with teeth, I used a repeating-linear-gradient on the ::after pseudo-element of the mouth div.\nNext, the Grim Reaper.\nThis is one of my favorite parts.\nThe Robe:\nI dreaded trying to make this shape. The solution?\nclip-path: polygon(...)\n. I just clicked out the points to create that flowy, tattered robe shape.\nThe Eyes:\nThe glowing red eyes are just two pseudo-elements (::before and ::after) on an empty\n.reaper-eyes\ndiv, with a box-shadow animation to make them pulse.\nThe \"Float\":\nThe entire .grim-reaper container has a simple animation that shifts its transform: translateY up and down, giving it that classic, spooky float.\nThe \"Magic\": Bringing It All to Life with Animation\nA static scene is boring. I wanted movement everywhere. This was the biggest challenge: orchestrating chaos.\nThe Bats:\nThis was a double-animation challenge. Each bat has a fly animation that moves it from left: -50px to left: 110% across the screen. But! The wings (\n.bat-wing-left\n,\n.bat-wing-right\n) have their own flap animation. I used animation-delay on the main .bat divs to make them fly out at different times.\nThe Ghost:\nSimilar to the reaper, he has a float animation. But the whole .ghost-group also has a slide animation that moves it across the screen, pauses, and then moves back.\nThe Spiders:\nThese were tricky. Each leg is its own div with a pseudo-element for the second joint, all absolutely positioned. The whole .spider-group has a simple translateY animation to make it dangle.\nThe Books & Candles:\nThese were perfect \"props\" to fill the foreground. The candle flames use a flicker and flame animation to feel alive.\nThe Cobwebs:\nDon't be fooled! These are just 4 rotated divs for the main lines and 5 concentric divs with a transparent background and a light border for the spirals. Simple, but super effective.\nWhat I Learned\nThis project was a beast, but I'm so proud of the result. My biggest takeaways:\nPseudo-elements are your best friend.\nI built moon craters, pumpkin segments, reaper eyes, stems, and battlements all without adding a single extra div to the HTML. My HTML is super clean; my CSS file... less so. 😂\nz-index is a dark art.\nWhen you have 20+ absolutely positioned elements, you will spend an hour trying to figure out why your cat is standing in front of a castle tower but behind a pumpkin.\nanimation-delay is key\n. Don't have everything happen at once. Staggering the bats, the window flickers, and the ghost's appearance makes the world feel more natural and less like a repetitive loop.\nIt was a ton of work, but seeing all the little pieces come together and move was one of the most satisfying coding moments I've had in a while.\nThanks for reading! What's your favorite part of the scene?", "metadata": { "title": "Spooky Scene with Gothic Castle and Grim Reaper CSS Art for Frontend Challenge - Halloween Edition - DEV Community", "description": "This is a submission for Frontend Challenge - Halloween Edition, CSS Art._ Hey everyone! As the... Tagged with frontendchallenge, devchallenge, css, codepen.", "keywords": "frontendchallenge, devchallenge, css, codepen, software, coding, development, engineering, inclusive, community", "author": null, "og:type": "article", "og:url": "https://dev.to/amananandrai/halloween-challenge-ak1", "og:title": "Spooky Scene with Gothic Castle and Grim Reaper CSS Art for Frontend Challenge - Halloween Edition", "og:description": "This is a submission for Frontend Challenge - Halloween Edition, CSS Art._ Hey everyone! As the...", "og:site_name": "DEV Community", "og:image": "https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjfqmylujjb09zz44jsam.png", "twitter:site": "@thepracticaldev", "twitter:creator": "@", "twitter:title": "Spooky Scene with Gothic Castle and Grim Reaper CSS Art for Frontend Challenge - Halloween Edition", "twitter:description": "This is a submission for Frontend Challenge - Halloween Edition, CSS Art._ Hey everyone! As the...", "twitter:card": "summary_large_image", "twitter:widgets:new-embed-design": "on", "twitter:image:src": "https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjfqmylujjb09zz44jsam.png" }, "paywall": { "listed_paid": false, "detected": false, "marker": "", "public_only": false, "policy": "付费/会员内容只保留页面公开可见部分，不绕过付费墙" }, "crawl": { "success": true, "status_code": 200, "error": "" }, "code_blocks": [], "images": [ { "status": "ok", "url": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fbrguipz9568szf8inp.png", "bytes": 54534, "reused": true, "local_path": "attachments/0240583ef3f9/images/002.png", "src": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fbrguipz9568szf8inp.png", "alt": "Demo Image", "downloaded": true } ], "audio": [], "videos": [], "links": [ { "href": "https://dev.to/challenges/frontend-2025-10-15", "label": "Frontend Challenge - Halloween Edition, CSS Art", "type": "a" }, { "href": "https://codepen.io/amananandrai/embed/GgoxLzx?height=600&default-tab=result&embed-version=2", "label": "", "type": "iframe" }, { "href": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fbrguipz9568szf8inp.png", "label": "", "type": "a" } ], "repair_version": 2, "repaired_at": "2026-10-14T10:49:15Z", "source_url": "https://dev.to/amananandrai/halloween-challenge-ak1", "papers": [], "actual_video_files": [], "body_chars": 5435, "expected_body_images": 1, "discovery_status": "ok", "delivery_status": "ok", "missing_reason": "", "raw_html": "attachments/0240583ef3f9/pages/source.html", "local_html": "attachments/0240583ef3f9/pages/article.html", "body_base_path": "attachments/0240583ef3f9/pages/", "body_markdown_path": "attachments/0240583ef3f9/pages/article.md" }