DEV Community

Cover image for πŸ§Ÿβ€β™€οΈ Pure CSS Zombie πŸ§Ÿβ€β™‚οΈ
Jorge Baumann
Jorge Baumann

Posted on β€’ Edited on

22 10 1 1 1

πŸ§Ÿβ€β™€οΈ Pure CSS Zombie πŸ§Ÿβ€β™‚οΈ

Hi everybody! Welcome to another exciting post about CSS.

First of all, check out the live demo: https://zombie-css.netlify.com/

In this video, I recorded the process from 0 to zombie. Made with vue.js and stylus preprocesor for the CSS.

Subscribe if you liked it. It's a newly released channel.

On the occasion of the halloween party πŸŽƒ I made this super awesome πŸ§Ÿβ€β™€οΈ Zombie πŸ§Ÿβ€β™‚οΈ in CSS, from scratch. 100% CSS, 0% images.

Zobie-CSS

On the left (πŸ‘ˆ) you can see the first version of the zombie, which was developed while the screen was being recorded.

On the right (πŸ‘‰) you can see the second version of the zombie, which was created during a refactoring process and without being recorded πŸ˜…. This one is the final version.


πŸ”₯ You can check the source code here and follow me if you want.
I usually create open source repos with ~interesting~ funny stuff like this.

GitHub logo baumannzone / zombie-css

πŸ§Ÿβ€β™€οΈ Pure CSS Zombie πŸ§Ÿβ€β™‚οΈ - Happy Halloween πŸŽƒ


Check out the color palette here: https://coolors.co/292c34-ffffff-b4e900-fe338f-ff70b5

color-palette


Let me know what you think in the comments below. πŸ‘»

πŸŽƒ Happy Halloween! πŸŽƒ

Top comments (3)

Collapse
 
sebbestune profile image
Sebastian Lindgren β€’

I love css-art like this! I find stuff like this especially interesting since it's pure css. Great job! I also enjoyed to see some of your process, smart to use the auto-page-reloading of Vue!

Collapse
 
baumannzone profile image
Jorge Baumann β€’

Sebastian, thank you!
Yes, I usually use vue for the hot reloading and the templating system. Also it's super easy to deploy a vue project in netlify :D

Collapse
 
karexpeter61881 profile image
Karex Peter β€’
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay