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…

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 (https://bezoscalculator.com).

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…

You have a website, and you are gaining some momentum and visitors. So you may get the thought, “Can I make some money out of this traffic?” And the answer is “Yes.” But how?

Captain Obvious’s statement: Nobody likes to see ads on a website. They worsen the user experience, slow things down, pose security problems, and often don’t match the site’s general style. Not to mention that sometimes, they may be totally inappropriate.

So let’s not go the ad route and ignore the ad servers. …

Picture of a person using a computer with the title “SEVEN INTERESTING <HTML> ATTRIBUTES (that you may not be using)
Picture of a person using a computer with the title “SEVEN INTERESTING <HTML> ATTRIBUTES (that you may not be using)

allow

The allow attribute defines a policy with the features available within the iframe. Some of the values that it can have: accelerometer, fullscreen, microphone, USB...

“allow” redefines how features are included in the iframe. It is the way moving forward and leaves the attributes allowfullscreen or allowpaymentrequest for legacy.

Example of use:

<!-- 
The page in the iframe will be able to use the camera,
accelerometer, gyroscope, and geolocation; but it won't be
able to use the microphone or the magnetometer, for example.
-->
<iframe src="/url-to-load"
title="demo"
width="700"
height="400"
allow="accelerometer; camera; geolocation; gyroscope">
</iframe>

cite

This is an interesting attribute for…

It has been snowing and freezing in Texas lately (it still is)… and that was the inspiration for this quick animation of snow falling done with HTML and CSS in less than 10 minutes (video at the bottom of the page).

Note: we used Pug and Sass/SCSS to simplify the repetitive parts of HTML and CSS respectively, but they are not needed. You can extrapolate the code so it’s only HTML and CSS (for simplicity, we will show both in the article.)

This is how our animation will look in the end ( demo via CodePen):

Setting the background

Let’s start by…

You probably have seen one of Chrome’s “easter eggs”: a game of a jumping dinosaur that show us with the “no internet connection” error page. If you haven’t seen it, you can go to Chrome, and type chrome://dino into the address bar.

This weekend, I developed a small version of that game just using HTML and CSS, without a single line of JavaScript and without using images.

Note: the game changes the values of CSS variables on animations, and not all browsers like that. For best results, check the game on Chrome. …

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