cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Mona Lisa with pure CSS. Pointless but fun.

Comments

  1. Sire, you rule the CSS :)

  2. This is... I'm pretty sure this is awesome, but I have a sneaking suspicion that it might just be insane :)

  3. Great job. And I agree, this is insane :]

  4. Alright, you won the internet.

    Can someone just shut down the internet now? It's over.

  5. very diligent human :)))))

  6. This must have taken forever, hah.

  7. I'm thinking this was done with some kind of script or online tool...

  8. 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.

  9. That is amazing but i think you have been used a software for converting this image to css?right

  10. 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 :)

  11. WOW!!! I am inspired! I see your Mona Lisa, and raise you The Creation of Adam - http://codepen.io/romandiaz/pen/DekiA

  12. 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.

  13. As promised, here is the code to generate it. https://github.com/jaysalvat/image2css

  14. 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.

  15. Great job. Amazing :)

  16. Here here for the beer. Thanks for putting out the PHP class

  17. Leo would be proud :)

  18. Second man to pass the 10k views. Good job!

  19. 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.

  20. @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.

  21. 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.

  22. 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.

  23. i made a similar image to css with Javascript , here is the pen : http://codepen.io/blazeeboy/pen/bCaLE

  24. I have recently made it in my lab) Found few concepts of it now) http://lab.legomushroom.com/shadeyourpixels/

  25. I've also implemented this but all in the client side: http://image2css.alexdoesit.com/

  26. Your skills are formidable, sir. Respect++

  27. 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.

    http://codepen.io/AdmiralPotato/pen/lLcfI

    Thank you for making play of things that are absurdly complex, and creating a work of inspiration for others. :)

  28. nice, thanks! I've made something like that and don't know where can I use it too)) http://codepen.io/sol0mka/pen/BDtEe

  29. http://fontstruct.com/fontstructions/show/mini_lisa Same idea, but with insanity instead of PHP. Enjoy!

  30. mükemmellllll

  31. oh mi god this is crazy

  32. Oh my God. For an instant I thought it was hand crafted. That would have been insane.

  33. Master :-)

  34. Ohhh God!! This is amazing!!

  35. this is just...CSS GODLY works..great job!!

  36. Gabriel @gabriel-ribeiro on

    OMG i know nothing about css

  37. I have tried to do something similar using square recursion. http://codepen.io/hex2bin/pen/lIgaB Todo : export to box shadow Css.

  38. I bet Leonardo would have done it by hand if they had CSS back in the Renaissance... just sayin.

  39. Lol, this is awesome.

  40. I love it!!!

  41. Woah!! Hands down to you. !! (y)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...