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…

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. …

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.) …

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…

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…