Skip to content
Color & Light

Colour studies for a winter palette

Cold light, long shadows and one warm window.

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.

Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.

Share

Written by

Theo Okafor

Theo writes about 3D transforms and rendering performance. He keeps a spreadsheet of every browser bug he has hit with preserve-3d.

All 18 posts by Theo Okafor

9 comments

  1. Tess Walsh

    The paper cube exercise sounds fun. Are the templates available somewhere?

    Reply to Tess Walsh
  2. Mateo Rossi

    Works nicely in Firefox. Safari needed the prefixed transform-style for us.

    Reply to Mateo Rossi
  3. Lena Vogel

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

    Reply to Lena Vogel
  4. Dana Ortiz

    Great write-up. Would love a follow-up on doing the same thing with SVG.

    Reply to Dana Ortiz
    1. Quinn Adler

      Agreed, this is the part most tutorials skip.

      Reply to Quinn Adler
    2. Theo OkaforAuthor

      Yes, container queries work well; we will cover them soon.

      Reply to Theo Okafor
    3. Rosa Medina

      Good question. Usually that means something is flattening the 3D context; check for overflow hidden on a parent.

      Reply to Rosa Medina
  5. Kofi Mensah

    Tiny typo in the second code block: the unit is missing on the translate value.

    Reply to Kofi Mensah
  6. Pia Jensen

    This is the clearest explanation of draw order I have read.

    Reply to Pia Jensen

Leave a comment

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