100 Days of CSS Illustrations (11-20)
Tags: css, art, html, showdev
Published: 2020-08-24 13:07:32

---
title: 100 Days of CSS Illustrations (11-20)
published: true
description: Days 11-20 of the 100 days of CSS illustrations challenge.
tags: CSS,art,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bcof39sf7wobtknlf2qa.png
series: 100 days of CSS illustrations
---

The second batch of the 100 days of CSS Illustrations. Days 14-16 were especially tough because I was flooded with work and barely had time to do anything (and it shows :S)... but I'm glad I was able to keep the one illustration per day rate.

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](https://codepen.io/collection/AOaOdx).

## Day 11: Coding master

This cartoon was done from scratch. A little tongue-in-cheek, the code in the background is the same as the drawing, so the character is coding itself. It uses CSS variables, so it can be easily customizable.

[![Girld coding on a laptop](https://dev-to-uploads.s3.amazonaws.com/i/vpdg64x1tin5vf499vy1.png)](https://codepen.io/alvaromontoro/full/WNwwoyY)

## Day 12: Love/Amor

I like the cubist/minimalist animations by [Dennis Hoogstad](https://dribbble.com/dennishoogstad). And I did a version of [Love](https://dribbble.com/shots/8975247-Love) that transforms to the word Amor on hover (without the animation.)

[![Illustration that forms the word Love](https://dev-to-uploads.s3.amazonaws.com/i/w0v79arj8dn2isic3mfz.png)](https://codepen.io/alvaromontoro/full/poyyePW)

## Day 13: Manga character

Another cartoon from scratch. I like it although I'm not a big fan of how the hair ended up looking. This manga character can also be customized via CSS variables (see code line 42).

[![Manga character](https://dev-to-uploads.s3.amazonaws.com/i/s91exceo1mczfpw2wwi6.png)](https://codepen.io/alvaromontoro/full/BaKKVQm)

## Day 14: Floating tower

I need to learn a lot about perspective and shadows. What is interesting about this 3D-looking castle it that it was developed with a **single HTML element** and using clip-paths and box-shadows.

[![Illustration of a floating castle](https://dev-to-uploads.s3.amazonaws.com/i/da7q1ymhf5e7rktlys7m.png)](https://codepen.io/alvaromontoro/full/jOqrYvm)

## Day 15: Fuzzy monster holding a sign

This is inspired by [my own design on Dribbble](https://dribbble.com/shots/13987778-Furry-thing-holding-a-sign) and it is part of the same series as [another cartoon in this challenge](https://codepen.io/alvaromontoro/full/XWdbmRB) (actually I reused some parts and cheated by using SVG for filters).

[![Cartoon with a Fuzzy monster holding a sign](https://dev-to-uploads.s3.amazonaws.com/i/1uwi2lvvuwdhtrlzzuef.png)](https://codepen.io/alvaromontoro/full/RwaGLvo)

## Day 16: Wiener dog

This cartoon was inspired by [this cartoon found online](https://sites.google.com/a/clipartonline.net/cartoon-dog-pictures/_/rsrc/1476987486035/dachshund-puppy/Dachshund%2021.png) (I don't know the author to credit :S)... although my version took a Simpsonesque turn.

[![Cartoon of a wiener dog](https://dev-to-uploads.s3.amazonaws.com/i/rydgo67p5vujql7jkne4.png)](https://codepen.io/alvaromontoro/full/NWNRGZQ)

## Day 17: Jaen, Spain

This is an illustration of Saint Catherine's castle in [Jaen, Spain](http://www.jaenparaisointerior.es/index.html?__locale=EN), the city where I grew up. To draw (especially the tree area) I used `clip-path` and the `drop-shadow` filter, so it may not be visible in all browsers.

[![Illustration of the castle in Jaen, Spain](https://dev-to-uploads.s3.amazonaws.com/i/tox2x48rehfh2vaom095.png)](https://codepen.io/alvaromontoro/full/RwaoomR)

## Day 18: Surprised Pikachu meme

A version of the popular Surprised Pikachu meme done with HTML and CSS. The quotes change every 7 seconds, and some of them should probably be Unsettled Tom instead... -5 points for the wrong meme use!

[![Cartoon showing Pikachu, one of the main characters of the TV show Pokemon](https://dev-to-uploads.s3.amazonaws.com/i/6nn1ooji2k4j5bkom8tb.png)](https://codepen.io/alvaromontoro/full/BaKQEoq)

## Day 19: Giraffe

This cartoon of a giraffe is based on a different one I made for my daughter around 5 years ago.

[![Giraffe cartoon](https://dev-to-uploads.s3.amazonaws.com/i/mpxfu4yp4wy22lyfbw2z.png)](https://codepen.io/alvaromontoro/full/JjXEXEB)

## Day 20: 3D Landscape

Based on [Landscape](https://dribbble.com/shots/7981891-Landscape) by [Parham Marandi](https://dribbble.com/parhawm) on Dribbble. It uses 3D transformations, and it is slightly interactive: you can move the mouse around the screen to see the landscape rotate.

[![Cartoon showing a landscape with layers of trees](https://dev-to-uploads.s3.amazonaws.com/i/j99ag327w6vlw9lgsb3o.png)](https://codepen.io/alvaromontoro/full/vYGgZmK)

## ...and a little extra

Yesterday, I had a little time to be silly before going to sleep, and I drew an [owl with HTML and CSS using the word "owl" as the base](https://codepen.io/alvaromontoro/full/ZEWLvLY) to draw from. You can see the process on this video:

 {% youtube kaI-ZdxNIkQ %}