DEV Community

loading...
Cover image for CSS Pirate Cartoon

CSS Pirate Cartoon

Alvaro Montoro
Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🀘
・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 (15)

Collapse
afif profile image
Temani Afif

let's animate this a little : codepen.io/t_afif/pen/dyNBzWK πŸ˜›

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Let's add some blinking: codepen.io/alvaromontoro/pen/WNRqEXv πŸ˜πŸ˜‘πŸ˜
πŸ˜‹

Collapse
afif profile image
Temani Afif

blinking without speaking? no! codepen.io/t_afif/pen/ZELdJxe πŸ˜›

Thread Thread
alvaromontoro profile image
Thread Thread
afif profile image
Temani Afif

haha! we have to stop this or he will leave the screen and slay everyone πŸ˜‚

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

I was running out of ideas of things to animate... At this point I was thinking about animating the toes maybe? 😳

Collapse
alvaromontoro profile image
Alvaro Montoro Author

The blinking doesn't look that great :S

Collapse
alvaromontoro profile image
Alvaro Montoro Author

That is really cool

Collapse
nefomemes profile image
Nefomemes • Edited

"How many CSS drawings you want to make?"
Alvaro Montoro:
**Yes**

Collapse
ziizium profile image
Habdul Hazeez

This is amazing.

Collapse
alvaromontoro profile image
Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Why shinchan became a pirate πŸ€”

Collapse
lizlaffitte profile image
Liz Laffitte

Incredible!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! πŸ™‚

Collapse
rajeshroyal profile image
Rajesh Royal

Sir you got amazing skills in CSS. πŸ™πŸ™

Forem Open with the Forem app