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

100 Days of CSS Illustrations (61-70)

alvaromontoro profile image Alvaro Montoro ・3 min read

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 61: Unimpressed

This cartoon was drawn from scratch with the face of an unimpressed person. You can watch how it was done in this video.

Minimalist drawing of a face with eyes, nose, and a mouth with a big frown

Day 62: Young woman holding a sign

Another cartoon from scratch. This time it is a young woman holding a sign with a slogan from the French May'68.

Young woman holding a sign with the text "Sous les pavés, la plage" (in French: "Under the pavement, the beach"). A slogan from May 68

Day 63: V-neck guy

And yet another cartoon from scratch... and a different style from the previous two. There is a video on how this cartoon was done on Youtube.

Young man smiling and wearing a v-neck t-shirt

Day 64: Vote!

This was an attempt at doing a simple logo/banner with HTML and CSS. The US presidential elections were 27 days away, and the main candidates were Trump (known for his hair) and Biden (who sports aviator sunglasses).

Poster with the words "Election 2020". The first zero is blue with sunglasses on top. The second zero is red with a yellow hair toupe

Day 65: Mouse

Inspired by "Day 6 - Rodent" by Cris on Dribbble (which is so much better with textures and shapes). There is also a video of how it was done.

Minimalistic illustration of a mouse with rounded ears looking back

Day 66: Girl holding a balloon

Inspired by an illustration by super-talented Ana María. As with the previous cartoon, the originals are 1,000 times better than my translation into HTML+CSS. Video of how it was drawn.

Girl with ponytails, wearing a dress, and holding a balloon

Day 67: Boat

This one is interesting. On Firefox, it looks fine, on Chrome sometimes a background flickers (why?), and on Safari, the box-shadows act funny with the boat shape... I'll need to be more careful with that in the future :S

Wooden boat with two oars floating on the water

Day 68: Little Death

A pre-Halloween cartoon done from scratch. I really like the result of this one. Chrome seems to have issues with box-shadows, rounded borders, and relative units, affecting how the scythe is drawn (or even displayed!)

A small grim reaper holding a scythe

Day 69: Frankenstein's Monster

Another Halloween-themed illustration from scratch. Halfway through this one, I felt tempted just to do The Hulk but didn't change direction. Here is a video of how it was done.

Face of a man with a scar and screws on his forehead, and a serious frown

Day 70: Ellipse's Poodle

This dog was drawn using only ellipses and semicircles. It was fun to do, although the result is not too impressive... It almost looks more like a goat than a poodle :S

Abstract/Minimalist version of a white dog holding a still position

Discussion

pic
Editor guide