1. 50

  2. 16

    It is legitimately horrifying to me that this is possible.

    1. 10

      I’m actually surprised how few elements were used to create this. box-shadow is pretty crazy when abused.

      1. 2

        I want to know how long this took.

      2. 8

        This is a beautiful hack.

        1. 2

          wow, that’s sick!

          1. 1

            Very good work! Also makes my browsers stutter like crazy but that’s sort of expected.

            And it looks like this was not made with img2css, I wonder if this was made by hand…?

            1. 4

              I do get the impression it was made by hand. The CSS code consists of a whole bunch of box shadows that are distorted to produce a shape, translated to place that shape, and coloured and gradiented. Most parts have a comment saying what part of the picture they produce; you can comment them out, and that part of the picture disappears. The part labeled ‘dots’ is the three spots of light at different places on the rim of the glass; the fact that these were combined into one definition is what makes me think this was coded by hand.

              We don’t see 3D objects, we see a flat plane of shapes of various shades. (Leaving our two-eyedness aside for a moment.) Our brains automatically interprets those as a 3D scene. I once read somewhere that one technique to paint or draw is to see through the 3D reconstruction your brain offers you, see past what you think is there, and instead see the shapes and shades that are really hitting your eye and paint those. I think that’s the principle at work here – no raytracing or lighting tricks, but a realistic painting with box shadows as the medium. It’s lovely, and very well done.