DEV Community

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

100 Days of CSS Illustrations (91-100)

alvaromontoro profile image Alvaro Montoro ・4 min read

This is the final installment of the 100 Days of CSS Illustrations challenge... at least the last one with new drawings –spoiler alert: there will be new drawings–, there will be at least one more post to look back and reflect on.

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 91: No-div-ember Coffee Mug

A slightly animated coffee mug drawn in CSS... and no HTML? Inspired by @jh3yy's #nodivember challenge. It started as a single-element drawing, then I tried to transform it from a coffee mug into a coffee cup. Finally, back to the coffee mug and make it a "no-element" illustration... and the video of the process.

Cartoon of a blank coffee mug

Day 92: Beaver

Inspired by Beaver by Alyssa van de Bogerd on Dribbble. As with many other illustrations, I uploaded a timelapse of how it was done to Youtube.

Cartoon of a smiling beaver

Day 93: Daydreaming

An illustration from scratch. I really like the facial expression and the simplicity of the drawing... Also, this is the first drawing I didn't record in a while, and it felt a bit weird.

Illustration of a woman smiling with her eyes closed

Day 94: Soccer field

This soccer field illustration may not seem like that much, but it has something interesting: it is also part of nodivember, and does not have any HTML tag (apart from the <body>). I will try to animate it later and have the dot/players move around... and the video of how it was done

Illustration of a soccer field from the top. The players and referees are dots, the team on the left is following a 4-4-2 tactic, while the team on the right has a 4-3-3

Day 95: Little Red Riding Hood

These last few days had been kind of "busy" and the CSS illustrations have been done in a rush and this is an example of that. Still, I completed it on time and recorded the process.

Cartoon of a girl wearing a red dress and hood, and holding a basket

Day 96: Face

Another illustration from scratch. Trying to play with colors and mixing rounded/oval shapes to make a continuous element...And a video of how it was done.

Bi-chromatic face of a person with the hair mixing with the background

Day 97: Person working

I saw different drawings on Dribble using this really simple technique with thin lines and flat shadows and wanted to try something similar. Timelapse of how it was drawn.

Cartoon of a man wearing a t-shirt and working on a laptop

Day 98: Punchline

Punchline is a new supervillain created by James Tynion IV in the Batman universe... I wanted to draw Erica Slaughter from Something Is Killing the Children, but that proved to be more complicated than I expected in HTML and CSS... but it worked fine as you can see on this video.

Punchline: a female supervillain with long hair and tons of makeup

Day 99: Man

A simple illustration of a man. I tried to add more details than usual and that made the drawing take a bit longer too... And a video of how it was done.

Cartoon of a man wearing a shirt

Day 100: Punk

...And for the last one... another cartoon from scratch! This punk-music person may not be as fancy as other drawings I've done, but I really like it. Probably one of my favorites in the 100. And a video of how it was drawn.

Woman wearing a tank top, with some piercings and punk hair

Extra: The end!

Yes, it is the end! That was the 100th illustration of the 100 Days of CSS Illustrations Challenge. So I did this vintage-looking "The End" message without using any HTML element (for nodivember):

Vintage looking The End message similar to the ones from Warner Brothers in the 60s

Discussion

pic
Editor guide
Collapse
abiolaesther_ profile image
Abiola Esther

Wow, great work

Collapse
alvaromontoro profile image
Collapse
adebesincell profile image
Tolulope

Looking forward to this 😊

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

Congratulations! 🎉

I've really loved following your 100 days - looking forward to see what comes next ☺️

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! It wouldn't have been possible without your inspiration and support 😊