Alvaro Montoro Presents: Fun with Flags... with CSS

The TV show The Big Bang Theory has a recurring joke about one of the characters presenting a show about flags: "Sheldon Cooper presents Fun with Flags." I wrote an article explaining the different gradients in CSS and using flags as the connecting thread, so it seemed appropriate to make my version of the show: "Alvaro Montoro presents Fun with Flags... with CSS."

The article starts by "setting the stage." The goal was to set a consistent display for the different flags. This was not the goal, but it made it convenient for the upcoming code.

It continues with the linear gradients and the Poland, Germany, and Belgium flags. This section explains the gradient type, what it is, and how to set different directions for linear gradients.

From there, the article moves on to radial gradients. After a short description of how the size is calculated, it shows how to code the flags of Japan and Bangladesh (repositioning the center of the circle.)

A "fun" explanation of how to visualize a conic gradient (folding a piece of paper with a linear gradient printed on it), leads to the flags of Benin and the Czech Republic, which offer two options to explore this type of gradient a little deeper.

Up to this point, we have only seen flags created with a single gradient. We move to multiple gradients starting with the basics: combining two or more CSS gradients (separating them with commas.) The flags of Sweden and the Bahamas decorate this section.

Setting different sizes and positions is the topic of the following section. It explains how to use them with the flag of Qatar and a different way of drawing the Swedish flag.

The following section is the last one strictly related to gradients. We review the repeating CSS gradients: linear, conic, and radial... but we only use the repeating linear gradient to draw the flags of Greece and Uganda.

There is a section about pseudo-elements and how they can generate more complex elements in the flags of Bahrain and Panama.

Finally, the article concludes with some tips and tricks and encourages readers to try creating flags by themselves to practice the different gradients in the article.

---

It is a long article (a 17-minute read) scheduled to be published on November 20th. But I am still looking at options. I like the general approach, but it's not as interesting as possible.