CSS Art: Severance Office

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

I started watching the show Severance (no spoilers, please!) and the office arrangement caught my attention. So I decided to replicate the desks using HTML and 3D CSS.

It may not be the best office culture example, but it's an office and it's pop culture... so it counts as office culture? 😅

Demo

Journey

I started by defining a generic "cube" figure with two components. Setting some custom properties for width, height, and depth, so I'd be able to customize it quickly and generate fast rectangular/cubic shapes.

One thing I realized (a bit late), the way I did the rotations for the cube, in some cases the front is visible and in others it is the back (so the panel looks flipped). This is not a huge issue, but it caused me to have to redefine some backgrounds. I realized a little bit late in the game (because I initially only used flat backgrounds without gradients), and chose not to modify the code. Although I may clean it up before the deadline on the 27.

From there, I cheated a little: all 4 cubicles are the same, just translated and rotated. So I only coded one, and once it was done, I copy-pasted it 4 times, adding small details in each of them (a tissue box, notes on the board, a pencil holder...)

And here is when I found something quirky: I rotate the cubicles 0, 90, 180, and 270 degrees, but the cubicle that was rotated 180 degrees disappeared! Checking the code, everything seemed fine. Looking into the dev tools, all the elements were in place... and yet they were not visible. Actually, they were flattened into the container.

I was using Chrome, so I tested on Safari and Firefox... and it worked fine on those browsers. It was a Chrome specific issue. A bug? It looked like it.

Then I went ahead and test one more thing. In the past, I found a bug on Safari: when a gradient had a stop at 100%, it ignored the following color. A workaround was to set the stop at 99.99%. The result was practically the same as 100%, and the browser displayed it correctly.

So I tried something similar in this case: instead of rotating the cubicle 180 degrees, I rotated it 179.999 degrees... and it worked! The issue only happens with 180 degrees.

As with the Safari bug, I reported this one to Chrome, and I linked the demo above in the ticket. So I guess that this demo (and the coding challenge) is associated to a Chrome bug now. For good or for bad. 😅

License

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 License. This means that you are free to copy, reuse, and modify the drawing (non-commercially) as long as you give appropriate credit to the author.