This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
Inspiration
Classic Halloween imagery inspired this scene:
- Haunted Victorian houses with flickering candlelit windows
- Jack-o-lanterns with glowing faces
- Bats in the night sky
- Floating ghosts
- Graveyards with tombstones
- Moonlit nights
Demo
https://codepen.io/Syed-Muhammad-Ali-Raza/pen/YPwOMbP
For complete code you can check out this Github repo
https://github.com/Syed-Muhammad-Ali-Raza/Halloween-Challenge
Journey
Started with a layout plan, then built elements from back to front:
- sky
- house
- pumpkin
- ghost
- bats
- tombstones
Using clip-path for complex shapes (pumpkin face features)
Layering gradients and radial gradients for lighting
Coordinating multiple animations with different delays
and durations Pseudo-elements (::before, ::after)
for details Transform and animation keyframes for movement
Top comments (1)
Looks great!👏🏻
Good luck in the competition!