DEV Community

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 (14)

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
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
jayehernandez profile image
Jaye Hernandez

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

Collapse
alvaromontoro profile image
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 Author

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

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

This right here is INTERESTIIIIIIIIIIIIIING!!!!!

Collapse
alvaromontoro profile image