Today I drew a cartoon of a pirate with HTML and CSS:
It may look a bit funky on some browsers because:
- It uses
drop-shadowfilter (in the hook, earring, and pegleg), which is not fully supported by browsers like Safari. - It uses relative sizes and shadows, and some browsers (looking at you, Chrome) get mixed up and delete the shadows with relative sizes and percentages.
Anyway, it was fun to code this from scratch. It took me a little bit longer than usual, and I wish I had recorded the process... maybe next time.
Edit: thanks to @afif for some animations and some fun in the comments (feel free to add an animation in the thread). Now the cartoon has some motion too:
Top comments (15)
let's animate this a little : codepen.io/t_afif/pen/dyNBzWK 😛
Let's add some blinking: codepen.io/alvaromontoro/pen/WNRqEXv 😐😑😐
😋
blinking without speaking? no! codepen.io/t_afif/pen/ZELdJxe 😛
it has two arms too! codepen.io/alvaromontoro/pen/gOgNxeJ 😬
haha! we have to stop this or he will leave the screen and slay everyone 😂
I was running out of ideas of things to animate... At this point I was thinking about animating the toes maybe? 😳
The blinking doesn't look that great :S
That is really cool
"How many CSS drawings you want to make?"
Alvaro Montoro:
This is amazing.
Thank you
Why shinchan became a pirate 🤔
Incredible!
Thanks! 🙂
Sir you got amazing skills in CSS. 🙏🙏