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

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.

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.

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

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.

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. 😬😰

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.

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.

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.

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.

Comments

[Doaa Mahely]

The Messi illustration 🔥

[Alvaro Montoro]

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

[Rob OLeary]

And a tear drop running down his cheek 😏

[Alvaro Montoro]

Thanks!

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

[Alvaro Montoro]

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

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

[Alvaro Montoro]

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

[Manmohan 🇮🇳]

That Messi goal gave me nightmares for a week but the illustration is fire. Great one, mate. 🔥

[Alvaro Montoro]

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

[Habdul Hazeez]

This right here is INTERESTIIIIIIIIIIIIIING!!!!!

[Jaye Hernandez]

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

[Alvaro Montoro]

Thanks!

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

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