Skip to content
CSS Transforms

Talk recording: depth without WebGL

Our conference talk on how far plain CSS can go.

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Clip: Sintel, (c) Blender Foundation, CC BY 3.0. Keyboard: Space play or pause, skip 5 seconds, M mute, F full screen.

A quick review before shipping

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.

Share

6 comments

  1. Hana Sato

    Bookmarked. The table alone is worth it.

    Reply to Hana Sato
    1. Jonah BergAuthor

      Glad it helped. The values are in the colour ratios reference.

      Reply to Jonah Berg
  2. Bea Kowalski

    Any plans for a video version of this one?

    Reply to Bea Kowalski
    1. Gus Lindgren

      Thanks! A follow-up is already in the drafts.

      Reply to Gus Lindgren
  3. Chen Wei

    We used the grid background on our docs site and it looks great with a dark theme too.

    Reply to Chen Wei
  4. Omar Haddad

    The tip about naming faces instead of colours saved our design system a lot of pain.

    Reply to Omar Haddad

Leave a comment

Your email address won’t be published. Required fields are marked.