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:

Top comments (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 • Edited

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

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

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
sid

Love it!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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!