DEV Community

loading...
Cover image for CSS Peasant

CSS Peasant

alvaromontoro profile image Alvaro Montoro ・1 min read

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)

pic
Editor guide
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

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
sidchaudhary04 profile image
Collapse
alvaromontoro profile image
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