DEV Community

Cover image for CSS Peasant
Alvaro Montoro
Alvaro Montoro

Posted on

CSS Peasant

Today I coded a drawing of a peasant using HTML and CSS. You can find the code on CodePen:

The style is inspired by the amazing characters of "At the Wall" by Atanas Atanasov... although it's not even close (really, that drawing is A-MA-ZING!)

I tried to add a small animation too: the blinking and something that may slightly resemble the chest moving up and down breathing, but nothing fancy.

Here's a video of how it was done:

Discussion (14)

Collapse
joelbonetr profile image
JoelBonetR

Thanks god I thank it was a "new flavour of the week" such Tailwind or another stuff πŸ˜†

Collapse
alvaromontoro profile image
Alvaro Montoro Author • Edited on

LOL πŸ˜‚πŸ€£πŸ˜‚πŸ€£πŸ˜‚πŸ€£

....but now that you mention it.... I have my own "CSS Framework": AlmondCSS. Actually, it is not a framework but an opinionated CSS reset that allows some customization.

Collapse
joelbonetr profile image
JoelBonetR

I've my own framework built in flex and avoiding overrides for better performance, it just needs a refactor and a public webpage... since a year ago... but i'm too busy jumping from a project to another to do that (it's already implemented on big projects but needs a style clean up to be more clean)

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

Is it on GitHub? Share the link! Maybe I could help a little (I can't promise anything though).

Thread Thread
joelbonetr profile image
JoelBonetR

it's on GitLab private repo, github actions came too late and gitlab-ci was convenient πŸ˜†

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

it's almost harvesting season

Collapse
ryencode profile image
Ryan Brown

I love the Big-Block-Sing-Song vibe/style :D
Oh no! now you all know I'm a Dad!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

I'm a dad an didn't know them :$

...but they look cool. I may do something like that next!

Collapse
bipinchy profile image
Bipinchaudhary

Really awesome job

Collapse
sidcraftscode profile image
Siddharth Chaudhary

Love it!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks!

Collapse
afif profile image
Temani Afif

How many tries it takes you before getting the final video? :)

Collapse
alvaromontoro profile image
Alvaro Montoro Author

The video is done in "one take". I had to stop a few times due to interruptions but the whole thing is done at once, without any preparation or editing (apart from putting together the pieces).

Collapse
nikhilmwarrier profile image
nikhilmwarrier

Wowsome!