CodeNewbie Community

loading...
Cover image for CSS Pirate Cartoon

CSS Pirate Cartoon

alvaro_montoro profile image Álvaro Montoro ・1 min read

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:

Discussion (0)

pic
Editor guide