Mona Lisa with pure CSS. Pointless but fun.
Sire, you rule the CSS :)
This is... I'm pretty sure this is awesome, but I have a sneaking suspicion that it might just be insane :)
Great job. And I agree, this is insane :]
Alright, you won the internet.
Can someone just shut down the internet now? It's over.
very diligent human :)))))
This must have taken forever, hah.
I'm thinking this was done with some kind of script or online tool...
Hey Jay, would love to know how you start this process. How do you start creating the image. Amazing, but would love to get more details.
That is amazing but i think you have been used a software for converting this image to css?right
This is amazing piece of css, it would be awesome to know more details about the process of creating 7500 line of box-shadow so i can paint my self :)
WOW!!! I am inspired! I see your Mona Lisa, and raise you The Creation of Adam - http://codepen.io/romandiaz/pen/DekiA
Check out my Birth of Venus! http://codepen.io/donaq/pen/spefA
Wrote a script to do it. https://github.com/donaq/pictocss
Hi guys! Of course this is not made by hand. I code some PHP lines to automatise the process as an experiment. I'll put the class on Github in the afternoon. Need to be polished.
As promised, here is the code to generate it. https://github.com/jaysalvat/image2css
Well done! Maybe you can set up a booth at tech conventions and do CSS box-shadow portraits of people, and you could make them buy you a beer or something.
Great job. Amazing :)
Here here for the beer. Thanks for putting out the PHP class
Leo would be proud :)
Great job Jay!
This pen is featured on Gizmodo: http://gizmodo.com/5949327/css-mona-lisa-turns-your-browser-into-the-louvre
Second man to pass the 10k views. Good job!
Just to let you guys know...he did not actually do this....it shows on his github account that he used a converter to change a picture into css.
@harris carney... so HE DID actually do it... if you know what I mean. Of course, i didn't actually make the converter, but I used it to convert a painting that I actually painted! http://codepen.io/petebot/full/yjrBw --- Anyways, really creative stuff Jay. Awesome.
Harris, it's notified in the comment of the codepen and in this very page that I wrote my own script to reprocude Mona Lisa. The converter I wrote is linked.
For what it's worth, I did a test with CSS zoom and found 20% to be the level at which a crisp/high-res image is displayed. At 250k, it gives you a postage-sized image on-screen, so it isn't quite efficient, but it is hella awesome.
I have recently made it in my lab) Found few concepts of it now) http://lab.legomushroom.com/shadeyourpixels/
I've also implemented this but all in the client side: http://image2css.alexdoesit.com/
Your skills are formidable, sir. Respect++
I dig your experiment, sir! When I first saw this a few weeks ago, I remember wondering what the performance of rendering hundreds or thousands of box-shadows over and over again would be like, since these box-shadows are rendered only once and then left alone.
So I let the idea stew for a while, and then I decided to build a toy of my own where all of the moving creatures were rendered via only multiple box-shadows from a single element. Turns out that it runs rather well, even on mobile devices.
Thank you for making play of things that are absurdly complex, and creating a work of inspiration for others. :)
nice, thanks! I've made something like that and don't know where can I use it too)) http://codepen.io/sol0mka/pen/BDtEe
Same idea, but with insanity instead of PHP. Enjoy!
oh mi god this is crazy
Oh my God. For an instant I thought it was hand crafted. That would have been insane.
Ohhh God!! This is amazing!!
this is just...CSS GODLY works..great job!!
OMG i know nothing about css
I have tried to do something similar using square recursion. http://codepen.io/hex2bin/pen/lIgaB
export to box shadow Css.
I bet Leonardo would have done it by hand if they had CSS back in the Renaissance... just sayin.
Lol, this is awesome.
I love it!!!
Woah!! Hands down to you. !! (y)
Need to know how to enable it? Go here.