CodeNewbie Community 🌱

Cover image for CSS Pirate Cartoon
Álvaro Montoro
Álvaro Montoro

Posted on

CSS Pirate Cartoon

Today I drew a cartoon of a pirate with HTML and CSS:

It may look a bit funky on some browsers because:

  1. It uses drop-shadow filter (in the hook, earring, and pegleg), which is not fully supported by browsers like Safari.
  2. 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:

Oldest comments (0)