There is a generator on Codepen that allows you to do this, that probably deserves more praise: http://codepen.io/blazeeboy/pen/bCaLE
Warning: Loading a large (e.g. 1920x1080) image will grind your computer to a halt as it fills up paged memory.
Mona Lisa in pure CSS
91–97 of 97 posts
Re: Mona Lisa in pure CSS
#92Earlier quoted context omitted.
And that is better than the X in pure javascript posts, with X being something which was impressive 10 years ago in other languages
...doing the same in a more restrictive environment (in this case, browser) is always an accomplishment.
Conflating positive fruition with positive value is just a positivistic error. That would mean that any fruition is beneficial by default. Unless someone made "logic in css".
It doesn't stop others from having a valid pov because a made b in a more restrictive c env.
Having said that, I like all the Mr Doob stuff and most openGL demo stuff coming out.
Re: Mona Lisa in pure CSS
#93So... It's a bitmap-image written in CSS boxshadows. It's a bitmap written in text. The resulting CSS is 247KB. Taking the same image and saving as a JPG (which I think is fair, since it's fairly blurry) results in a 40KB file. That's more than 6 times smaller. If you scale it down to the detail level found the CSS (each CSS-"pixel" being a 4x5 unit) even a PNG will easily beat it at 24KB. Here the JPG also clocks in…
It's just a hack. You're on Hacker News. If you don't like it, don't upvote it.
This reminds me of when I brought a friend of mine to Maker Fair in NYC last year... We were surrounded by a strange amalgamation of weird gadgets and "art", and sometimes the line between the two is not always so clear :) The entire time we were there she kept asking "but what is it FOR?!" or "but who would WANT a thing like that?". I've always found myself asking questions like "ooh what does it do?" and "what can I learn from it?"
Re: Mona Lisa in pure CSS
#94So... It's a bitmap-image written in CSS boxshadows. It's a bitmap written in text. The resulting CSS is 247KB. Taking the same image and saving as a JPG (which I think is fair, since it's fairly blurry) results in a 40KB file. That's more than 6 times smaller. If you scale it down to the detail level found the CSS (each CSS-"pixel" being a 4x5 unit) even a PNG will easily beat it at 24KB. Here the JPG also clocks in…
It's just a hack. You're on Hacker News. If you don't like it, don't upvote it. This reminds me of when I brought a friend of mine to Maker Fair in NYC last year... We were surrounded by a strange amalgamation of weird gadgets and "art", and sometimes the line between the two is not always so clear :) The entire time we were there she kept asking "but what is it FOR?!" or "but who would WANT a thing like that?". I've…
Sure. It's a hack. I get it. Hacks are cool. But this is a hack which has been posted a million times over and over the last few months.
At some point the novelty wears off and IMO this one is way past due.
Apart from that, I was asking if there was anything else I was missing. From the responses I got, it seems the answer is "no".
Re: Mona Lisa in pure CSS
#95A friend of the guy did even crazier, a animated nyan cat (including the annoying music) with only one html tag, and thousand lines of CSS ^^
http://codepen.io/JBay1337/pen/Ejtfl
Webkit only though
It started kinda supidly over a beer yesterday with the joconde guy, then one friend posted a 50 mo animated nyan cat, I posted a 22mo version, and we kept iterating until he won.
His last version is kinda smart: it uses css keyframes like divx use video keyframes, with diff in between. Almost the first css video codec :-p
Re: Mona Lisa in pure CSS
#96Earlier quoted context omitted.
See the thing is that often at least for me when I want to save a picture it's because I like it and want to use it as a background, the trouble with printscreen is that it only captures the picture at your screen resolution not the photo's resolution so you end up with a grainy unusable image... if someone goes through the trouble of making a picture uncopyable I give up immediately, it's just not worth the hassle.
Uhm, doesn't this spur your ambition? With something like firebug installed, it takes about 20s to find "div#main-photo-container>noscript" holding the image on flickr in all it's glory.
Or select the picture and copy it to the desktop.
Re: Mona Lisa in pure CSS
#97"This Site Totally Doesn't Work Without JavaScript."
Pure CSS my arse.