DEV Community

Cover image for 100 Days of CSS Illustrations (21-30)
Alvaro Montoro
Alvaro Montoro

Posted on

100 Days of CSS Illustrations (21-30)

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

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

Top comments (15)

Collapse
 
dmahely profile image
Doaa Mahely

The Messi illustration 🔥

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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
 
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

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

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

#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

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

Collapse
 
jasondavis_2 profile image
Jason Davis

I am working as a design team lead at Monster Logo Design and I have seen my team members using different techniques in terms of exporting the paths.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Hey! You are my neighbors! (or at least fellow Austinites?)

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

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
 
ziizium profile image
Habdul Hazeez

This right here is INTERESTIIIIIIIIIIIIIING!!!!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
jayehernandez profile image
Jaye Hernandez

Amazing work! Great colors used as well for the magic castle 🏰

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!