CSS Word Associations

Tomorrow's cartoons are weird CSS word associations and extensions. It starts with a drawing and a regular English word then it expands to a CSS property-value pair that is applied to the cartoon.

There are a few of them, but I only coded 5, because it's one of those ideas for comics that I think are great, but once implemented I'm not so sure about them 😅

Here are the 5 animated cartoons (you can check the interactive demo on this private CodePen, mouse over to reveal the association):

Hens → Hyphens: auto;

This one was a fun challenge to code: how to trigger hyphenation in a drawing? I must admit I cheated a little, because the hyphenation happens, but the visible one is not the actual hyphenation (which is hidden). The trick was having the word "chicken" in an inline element, selecting a language that is better at breaking words than English (e.g. German), and applying a background with a chicken drawing. The background works as expected and breaks with the word! It may sound complicated, but the concept is simple (definitely simpler than I explained it.)

City → Opacity: 0.3;

This one is pretty obvious: city turns into opacity and the city goes semi transparent, and you can see the clouds through the buildings. Simple and direct.

line → outline-offset: 2em;

What looks like a painting frame is actually a border, or more specifically an outline. So we can separate it from the content by setting an outline-offset. The picture title card is actual text but it's hidden.

Ape → shape-outside: var(--head);

This cartoon was a pain in the neck to code. Especially because the face is made up of two parts and I organized them using margins (maybe not the best way, I know)... also the ape looks weird without ears, but when I tried to add them, I broke the whole thing, so I chose to remove them.

Column → column-gap: 0;

I honestly thought that more people knew about this but, after seeing a few conversations on social media, it is evident that not so many devs know that they can set different gap sizes for column and row in Grid and FlexBox. In this cartoon, I literally drew some ionic-looking columns with a gap, and resize the column-gap to 0 to make them get together.