Early Access: Lost in Translation

Here's the comic for next Monday: Lost in Translation (or in translateY, to be more precise). And these images show (part of) the process: from a work in progress with the hands missing (I hate drawing hands even on paper, I don't know how to do it).

Then we go to a complete version with all the elements in place (although it will be retouched a little later). Finally, I decided to add some shadows so it wasn't that flat. I think the shadows add a lot to the drawing. There are two versions of them: one with a sharp edge and another with a blurry edge.

You can try different combinations on the private CodePen with the demo and source code:

• Toggle the class "no-shadow" to add/remove the shadows

• Toggle the class "flat-shadow" to make the edges sharp or blurry (it will only work if the class "no-shadow" has been removed)

Thanks to CSS custom properties, I was able to change the values depending on the class and change them from panel to panel with minimal code changes.

Anyway, I hope the comic is not too difficult to understand (CSS transforms and translations seem to be a struggle for developers), and that you enjoy it.

Have a good weekend!