The sun setting on the Salton Sea, reflecting the sky and a rotted pier

In previous articles I’ve addressed why we need responsive images (fluid design plus screen pixel densities) and looked at the <picture> element, while conducting investigations of the w and x descriptors. Today I’ll explain the sizes attribute, the trickiest part of the new specification.

sizes is… odd. It looks weird. It acts weird. But it is the final missing piece of the spec, the part that brings everything together, and therefore key to understanding responsive image syntax.

If there’s one thing to keep in mind about sizes, it’s this: sizes expresses the designer’s intentions for the image. It does so with a little bit of math, for one reason…

Recently a student of mine pointed out a common web page layout problem that I had been unaware of. Of course, once it was pointed out to me, I couldn’t unsee it, and had to find a solution. On the same day, Šime Vidas made me aware of a subtle new CSS addition to control typographic layout. This article introduces both.

A few months ago I created a CSS “diamond” mesh navigation; this time, I thought I’d do a hexagonal mesh with random highlights to spark viewer interest.

While image outlines in squares, circles and even octagons are relatively easy to create in CSS, hexagons are a little more challenging, so I decided to use SVG and clip-path to achieve the effect.