As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. I published a series of 10 posts with 10 images each. This article has all images in a single post, as well as links to videos on how they were drawn.

Some of the images were original, and some others were inspired or based on different artists (providing a link to the original in the description for these cases)… which lead to an interesting combination of designs and styles, while I tried to find my own.

Here are the 100 illustrations I made in…

Modern HTML and CSS features to make CSS art accessible for everyone

Drawing of a woman looking at the post title: “creating acccessible CSS drawings”
Drawing of a woman looking at the post title: “creating acccessible CSS drawings”

CSS art has been a thing since the creation of CSS itself. It is a great way of practicing and learning and it makes for an interesting coding challenge. But it has a big problem: CSS art is inherently not accessible.

In this post, we will not see how to create CSS drawings and illustrations (there are plenty of those posts). Instead, we will focus on some tips and best practices to make that CSS art more accessible for everyone.

After applying these techniques, your CSS art will be friendlier for screen-reader users, people with specific color needs and preferences…

Let’s clarify one point: when talking about a window, we refer to an actual window like on the wall, not a window on a computer. This post will be about how to draw a window with a single <div> and how to make it interactive, so you can open/close the blinds by pulling the string.

This is what we are going to develop (it looks better on larger screens, as it is sometimes tough to pull the string on mobile):

This demo was inspired by @jh3y ‘s 3D window demo that uses the new@container query, and that you can…

An eraser deleting the word <pre>
An eraser deleting the word <pre>

A few weeks back, I suggested this topic on Reddit and got some backlash (in part because of my poor wording.) Later, talking to other developers and web professionals, most agreed on the opposite of what Reddit told me.

The center of the discussion was the <pre> element in HTML, its usefulness and meaning, and to some extent, even if it should (or should not) be deprecated.

This whole premise may sound ludicrous or even ridiculous: “What do you mean deprecate <pre>?" But it is a serious question... and I think a valid one.

This article intends not to ask…

Sometimes we need to hide parts of the page from the users. It may be a spoiler or sensitive content and pictures that we want users to approve before displaying them.

There are a couple of HTML elements that will natively do what we want: <details> and <summary>. They have native collapsed/expanded states that the browser handles to show/hide the information, so we don’t need any JavaScript.

See them in action here:

They work fine, but the default style looks bland and simple. …

See how much Jeff Bezos made since you started reading this article
See how much Jeff Bezos made since you started reading this article

Some developers use their weekends to develop cool and grandiose projects to learn new technologies and to double down as second (or third) sources of income… instead, I used this past weekend, to develop a small and silly project.

I coded a web page that calculates how much money Jeff Bezos makes while you read it: Bezos’ Calculator (

It is a mixture of tongue in cheek and social criticism (bubbles pop up with milestones comparing it to other salaries and goods.) …

Polygonal portraits of a lion, a girl, a scarecrow, and a tin woodman.
Polygonal portraits of a lion, a girl, a scarecrow, and a tin woodman.

The Wonderful Wizard of Oz is one of the books I have read recently. So I decided to draw the story’s main characters in a minimalist/vectorial way, just using 8 colors, HTML, and CSS.

Here’s a demo on Codepen:

I tried to keep the drawing simple and to the minimum, so each character only has four sections:

  • Cowardly Lion: mane, face, ears, and nose.
  • Dorothy: face, hair, dress, and hair bows.
  • Scarecrow: hat, face, necktie, and straw.
  • Tin Woodman: hat, face, jaw, and bowtie.

The drawings are done with clip-path, using the polygon() function. So the process was a…

This post is going to be a little bit of showing off (sorry). It is a personal project that I did over 2 years ago -before joining DEV-, and that CSS {IRL} reminded me about today.

It is a collection of drawings of The Simpsons characters done in CSS. I learned a lot coding them, and I’ve learned even more since… so I’m scared of looking at my own code now.

Here are some of the drawings (there are 10 in total):

Bart Simpson

This was the first one I did for a CodePen challenge with the colors red, blue, and yellow…

A pencil drawing a triangle
A pencil drawing a triangle

In this post, we are going to see different methods to draw a triangle in CSS. We will focus on three in particular: the traditional method using borders and two more modern options with clip-path and linear-gradient().

Using border

This is the “classic” way of drawing a triangle in CSS, and it seems like the most popular one by far. It consists of having a single colored border, leaving the others transparent. These are the steps to achieve it:

  1. Set a width and height of 0.
  2. Set the border color to transparent.
  3. Set the top border to 0.
  4. Set the side borders…

Paper cut with the word dream. Picture by Sharon McCutcheon (from Unsplash)
Paper cut with the word dream. Picture by Sharon McCutcheon (from Unsplash)

I have a dream job. It’s at a big company (I won’t say the name), on a small and collaborative team full of talented and supportive people, with exciting challenges, room to grow, and cool perks.

…and that dream job was in 2008.

What does that mean? Did I get it? Did I not get it? Did the dream become a reality? Did it shatter into pieces? Did the dream become a nightmare?

And to that, I have to say, “ Wow! that’s a lot of questions” and the answers are: many things, yes, also yes, kind of, kind of…

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store