loading...
Cover image for 100 Days of CSS Illustrations (21-30)

100 Days of CSS Illustrations (21-30)

alvaromontoro profile image Alvaro Montoro ใƒป3 min read

This week was a busy one at work, and I barely made the 10 illustrations for this batch. Most of them are my own compared to other times that I based more on Dribble.

Here are the 10 illustrations/drawings I did in the past 10 days. Click on the image to see the full illustration with the code, and click here to see a CodePen collection with all of the drawings plus some variations.

Day 21: Angel & Demon

The first version of these characters was from 2010, when I started developing a Bible trivia game (that never saw the light of day). The original ones are smoother and curvier, and have arms too :P

Cartoon of an angel and a demon

Day 22: Pucca

Pucca is a popular character created by VOOZ. It was originally an online e-card service but soon extended to web animations, games, TV shows... I almost missed this day, so I ended up going for something easy.

Illustration of the cartoon character Pucca

Day 23: Dog from letters

I tried to do something similar to what I did with this owl, but I failed. Sometimes you have days to draw and love it, and some days you hate the result. This was one of the latter... maybe I'll try to redo a different day.

Minimalistic cartoon of a dog

Day 24: Cartoon character

Another customizable cartoon (change the CSS variables on line 33) with a manga-esque look. You can see how I coded it on this video

Cartoon of a person smiling softly

Day 25: Bender Bending Rodrรญguez

Futurama is(/was/is?) an amazing TV show, and gave us one of the most iconic animation characters ever: Bender! Unfortunately, I used drop-shadow and some transform that makes the cartoon look terrible on some browsers.

Cartoon depicting Bender from the TV show Futurama

Day 26: Hello... I guess...

Another cartoon that was done in a hurry... so it's not that great, plus it uses drop-shadow so it won't work in all browsers. ๐Ÿ˜ฌ๐Ÿ˜ฐ

Cartoon showing a man with a speech bubble with the text "Hello... I guess..."

Day 27: Man's face

I drew this one in a hurry too, but I like the general result a lot better than the previous image. Not 100% sold on the eyes, but don't look that bad either.

Cartoon of a man with a serious expression

Day 28: Plant sprouting

A vectorial cartoon of a pot with a plant sprouting inside. The soil has a little texture, and some filters were used to add some blurriness.

Alt Text

Day 29: Magic castle

Another castle โ€“the last one for a while, I promiseโ€“. This time it is based on Disney World/Cinderella's Castle by Dmitry Stolz on Dribbble... and coding this one took more effort than what I expected initially.

Cartoon of a castle that resembles the one from Disneyworld, with many towers and balconies

Day 30: Leo Messi

Based on Leo Messi by Mark Iddon on Dribble. This illustration of Leo Messi celebrating a goal against Real Madrid was done only using clip-paths and backgrounds.

Polygonal cartoon depicting Leo Messi showing his jersey to a non-visible crowd

Discussion

pic
Editor guide
Collapse
dmahely profile image
Doaa Mahely

The Messi illustration ๐Ÿ”ฅ

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Maybe I should update it and add a hanger for the jersey if he ends up leaving Barcelona.

Collapse
robole profile image
Rob OLeary

And a tear drop running down his cheek ๐Ÿ˜

Collapse
jayehernandez profile image
Jaye Hernandez

Amazing work! Great colors used as well for the magic castle ๐Ÿฐ

Collapse
alvaromontoro profile image
Collapse
robole profile image
Rob OLeary

I notice you mentioned drop-shadow affecting rendering in some browsers, what other properties or features should you avoid to make an illustration more cross-browser compatible in your experience?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

With the newer versions of Edge being Chromium, there are not as many issues. A few properties to be careful are:

  • filter: not all filters are supported by all the browsers. E.g. drop-shadow on Safari;
  • clip-path: IE does not support it at all, and most browsers only support polygon() or url(). path is in the definition, but no browser supports it (and it would be a game-changer).
  • background-image with gradients: while linear-gradient and radial-gradient are supported, conic-gradient is not, and repeating-linear-gradient is only partial.
Collapse
sanikerdemadrid profile image
Manmohan ๐Ÿ‡ฎ๐Ÿ‡ณ

That Messi goal gave me nightmares for a week but the illustration is fire. Great one, mate. ๐Ÿ”ฅ

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! I am an Atletico de Madrid supporter. Messi has made me cry more than once...

Collapse
ziizium profile image
Habdul Hazeez

This right here is INTERESTIIIIIIIIIIIIIING!!!!!

Collapse
alvaromontoro profile image
Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

#30 is insane! What's your secret?

I've seen people make really neat things with clip-path, but that CSS property has always confused me.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! I used a regular graphic design tool and exported the paths so I could use them on CSS.