Responsive isometric scenes need a plan for narrow screens. Sometimes the answer is to scale everything down with clamp(), and sometimes it is to hide secondary blocks entirely. What rarely works is letting the scene overflow sideways, which makes the page scroll horizontally and feels broken on a phone.
Isometric type specimens
9 imagesJPG, 1200 × 1200
Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.
Nina Ahlberg
Tiny typo in the second code block: the unit is missing on the translate value.
Chen Wei
Short and useful. More quick tips like this, please.
Mateo Rossi
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Alex Moreau
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Inês DuarteAuthor
Yes, container queries work well; we will cover them soon.
Inês DuarteAuthor
Same here. Adding will-change on the wrapper fixed it for me.
Eli Novak
Love the palette. Could you share the exact lightness values?
Inês DuarteAuthor
The templates are in the downloads section of the reference post.
Pia Jensen
I tried this on an old iPad and one of the faces flickers on hover. Any idea why?