9 ms·
Mona Lisa in pure CSS
- jgv 14y agothis is insane
- ejpastorino 14y agoamazing!!!
- zawaideh 14y agowahhh! box-shadow can do that?! Crazy!
- andrus 14y agoCool hack. It would be neat if the box-shadows used relative units rather than `px` so that you could resize the result, but then why not use SVG?
- jtreminio 14y agohttp://codepen.io/anon/full/FHqiE http://codepen.io/anon/full/FHqiE
- jimmyhwang 14y agoAmazing job! How long did it take and were there any tools you used to make this faster?
- borplk 14y agoIt's simpler than you might think. Takes less than 20-30 lines of Python. Read the pixels in the image and for each pixel print some parts of the box-shadow CSS with the right numbers... done.
- ftwinnovations 14y agoSo is there just an app making these types of things at this point? I'd have to imagine so... And if that's the case it's about as impressive as a generated ASCII art Mona Lisa.
- s_m 14y agoAlmost certainly. You could probably do this in about twenty lines of PHP, it's just a map of pixels from an image into CSS pseudo-pixels.
- javajosh 14y agoExtremely clever!
- steffanwilliams 14y agoThere is a generator on Codepen that allows you to do this, that probably deserves more praise: http://codepen.io/blazeeboy/pen/bCaLE http://codepen.io/blazeeboy/pen/bCaLE
- suyash 14y agoTrue, how cheap that the author is trying to take full credit as shown on his codepen example: /* Mona Lisa with pure CSS Pointless but fun! By Jay Salvat http://jaysalvat.com */
- TazeTSchnitzel 14y agoWarning: Loading a large (e.g. 1920x1080) image will grind your computer to a halt as it fills up paged memory.
- corwinstephen 14y agoThe best part about this is that now I know that the box-shadow property can take multiple arguments. The more you know...
- elliotlai 14y agoI want a Ecce Homo version of this please ><
- phoboslab 14y agoAnd here I am, upvoting the thread because I thought it's a statement about how ridiculous all the 'X in pure CSS' posts have gotten, while everyone else in this thread seems to be genuinely impressed.
- lowboy 14y agoAt least it's better than X in pure HTML5.
- grimlck 14y agoAnd that is better than the X in pure javascript posts, with X being something which was impressive 10 years ago in other languages
- egeozcan 14y ago...doing the same in a more restrictive environment (in this case, browser) is always an accomplishment.
- novalis 14y agoConflating 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.
- deleted 14y ago[deleted]
- skrebbel 14y agoIt's even more ridiculous once you realise that data: URLs work in CSS. Thus, I hereby present to you, the Mona Lisa in pure css (!!), using even fewer bytes! http://codepen.io/anon/pen/gnqlc http://codepen.io/anon/pen/gnqlc
- pan69 14y agoAbout ten years ago I made a converter application that converted a image (jpg/png/gif) to an HTML table. The result at the time was great. Unfortunately the generated HTML was quite verbose so it took a lot of bandwidth to download. I guess a similar conversion program has been used here and it seems that CSS these days can take off quite a bit of fat of that generated code. PS: Forgot to mention. The reason I wrote the converter at the time was as an experiment to avoid people from right-click and saving images.
- cup 14y agoWhile some websites stop people from right clicking and saving (such as flickr) you can get around that by just screen printing. So why would you invest time in trying to stop one route of copying when there is a second unstoppable?
- Scottopherson 14y agoClients.
- cup 14y agoWould it not be easier to explain to them that what they're asking for is impossible to deliver?
- petsos 14y agoProbably not.
- gsteinb88 14y agoSometimes, yes. Frequently it's very difficult to explain to a client that the way you[1] interpret the words they[2] are using is rather different than what may be in their head. That is, from the technical perspective it may be 'impossible' to achieve perfect DRM. But from another perspective, if the added cost of circumventing that DRM is large enough that most[3] people won't bother, it /may/ be a success. See: Steam. In short, the language/terminology barrier between people in different fields results in a lot of client/developer miscommunication, frustration, and, frankly, poor results. A rather complete discussion on this (w/r/t a client wanting 100% uptime): http://news.ycombinator.com/item?id=3056414 http://news.ycombinator.com/item?id=3056414 [1] The technical party in the relationship [2] The party paying someone you to handle the technical side [3] Again, we run into a problem with precise definitions using 'most' - do we mean 99.9%? Do we mean enough that the cost of implementing the DRM is larger than the $ saved. Though the lost sales due to /having/ DRM is an entirely different discussion.
- jere 14y agoJeez. If your underlying method is pixels, you can render any image you want. I'm afraid I'm missing the "hack" here.
- deleted 14y ago[deleted]
- suyash 14y agothat is the hack....I know it's kinda stupid or awesome..depends how you look at it...but pixel by pixel..we can draw anything!
- jayflux 14y agoI agree, I was expecting some CSS hackery. But this is nothing more than using CSS for pixels. With that logic you could theoretically create anything.
- tlrobinson 14y agoWe get it, you can draw anything in "pure CSS".
- RKearney 14y agoNot entirely. This also requires HTML.
- lowboy 14y agoYou know, I was going to write that it was a given since CSS is applied to a markup language so you need some sort of markup, and that you were being pedantic. But then I thought it would be neat if someone were to make the Mona Lisa as ASCII art using only valid CSS, thus rendering a truly pure CSS version. I guess you could further argue that it isn't pure CSS because it also involves something to display the text.
- ______ 14y agoYou don't need HTML at all. Using pseudo elements and taking advantage of browser assumptions you can make HTML-free webpages: http://css-tricks.com/using-css-without-html/ http://css-tricks.com/using-css-without-html/
- lowboy 14y agoThe example doesn't work for me on Chrome stable, Win7. So looks like we need some markup.
- darkstalker 14y agoWorks for me on Firefox 15 (linux)
- kd0amg 14y agoAnd apparently, "This Site Totally Doesn't Work Without JavaScript."
- vacri 14y agoI've always said that recreating the Mona Lisa is the 'Hello World!' of the art community. Curious to see the two combining like this.
- enos_feedler 14y agoI thought Lenna was the Hello World of the art community. Or is that the image processing community? :P http://en.wikipedia.org/wiki/Lenna http://en.wikipedia.org/wiki/Lenna
- deleted 14y ago[deleted]
- vidarh 14y agoAnd the price for most horrible abuse of box-shadow goes to.... (Nice hack, though; didn't know box-shadow could be abused that way)
- gavinpc 14y agoIf I had a thousand dollars for every HN post that works in Chrome and not Firefox, I'd feel somewhat better about what that suggests.
- woah 14y agoYea, I'm a designer, I use chrome- you know why? The inspector is a lot better. The firefox inspector is sure sexy but it is simply not very powerful. Yea, there's firebug, but chrome has a very powerful set of tools built right in. I can amaze people by redesigning a page on the fly- as long as I don't accidently refresh.
- gavinpc 14y agoI like Chrome, too. But I'm not ready to see Firefox abandoned. My hope is that the demo projects I've seen here are just bleeding-edge experiments that people were too excited about sharing to bother with the grunt work of browser compatibility.
- iSnow 14y agoWorks just fine here in FF 15 - and even looks better than in Chrome, because the stripey distortions are missing.
- christianblais 14y agoBut... why?
- christianblais 14y agoBut... why?
- deleted 14y ago[deleted]
- seanlinehan 14y agoMe, in 60,000 lines of pure CSS: http://codepen.io/anon/pen/ItbEm http://codepen.io/anon/pen/ItbEm If anybody wants to take a gander at my very slow PHP code, it's here: https://gist.github.com/3831235 https://gist.github.com/3831235 Anybody have any optimization tips?
- eranation 14y agoWhat would be nice is the source code of the code generator that did that CSS so everyone can post tomorrow their favorite image in pure CSS...
- raldi 14y agoHow do you know he didn't draw it by hand?
- eranation 14y agoI don't, I just know I wouldn't
- seanlinehan 14y agohttps://gist.github.com/3831235 https://gist.github.com/3831235
- eranation 14y agoDid you just find it, or wrote it right now? either way, this makes the point of the top voted comment even stronger.
- seanlinehan 14y agoI wrote it after seeing the thread. It's a pretty simple technique, but it's intensely resource heavy. If the op (or anybody) wrote a script that does this algorithmically to produce as few drop shadows as necessary while maintaining quality... Well, then I'd be thoroughly impressed. Regardless, this clearly struck a chord with some people so I say cheers to the op! Easy or not, he did it, did it well, and captured peoples' wonder.
- dj2stein9 14y agoThe Da Vinci's of the future will use HTMLx and CSSx instead of paint and canvas.
- mukhabbat 14y agoAs pan69 said this technique isn't new! I've experimented this but I don't like it, it's heavy for coding images. It's good for smaller codes like http://codepen.io/joshnh/pen/ohbHl http://codepen.io/joshnh/pen/ohbHl
- diggan 14y agoYeah, smaller code... Only 2000 lines for something you can do with 2 or 3.
- deleted 14y ago[deleted]
- nowarninglabel 14y agoIt's a bit disappointing that a project which is supposed to show me something in "pure CSS" is hosted on a site which gives me a big warning/block that the site "doesn't work with out javascript, like at all".
- diggan 14y agoCodepen is just a viewer and editor for HTML, CSS and Javascript.
- pshirishreddy 14y agoDavinci of the web !
- bashzor 14y agoOh come on... Let me make you one in HTML4.01! Or HTML5! Or Javascript! Pixel by pixel... seriously.
- jameshsi 14y agoi actually like this better than the other "pure CSS" examples i've seen. in a sense, i think of this as an interactive lesson to illustrate a box shadow hack that could conceivably be useful
- derleth 14y agoIt's in 'pure CSS', yet it requires Javascript.
- fuddle 14y agoDisgraceful!
- diggan 14y agoHow big would the CSS-image of Mona Lisa be compered to a "normal" image with the same resolution and pixel density?
- josteink 14y agoSo... 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 at 6KB. So I don't get it. Using CSS, using a text-format to encode bitmaps has always been and will always provide subpar results. Ok. So it can be done. We know that. It has been proven times and times again. Apart from that: What's the point?
- hk__2 14y agoEven the gzipped version is 49kb.
- TazeTSchnitzel 14y agoI was going to say this sort of thing would be useful on reddit for subreddit stylesheets, but they allow uploading images. So there's no practical application at all.
- dandelany 14y agoIt'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?"
- josteink 14y agoSure. 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".
- masonlee 14y ago"Of course, it's not handcrafted" LOL
- Fletch137 14y agoThe script that generated the CSS is far more impressive than the image itself, would definitely like a look at that.
- aw3c2 14y agofor each pixel coordinate and color, output an offset and color. Not sure how it is impressive.
- acjohnson55 14y agoNo big deal. Let me know when you can do it using VIM syntax highlighting and ASCII
- kidh0 14y agoSeems that everybody that has plenty of time, a little bit of talent and knows this tool http://kushagragour.in/lab/picssel-art/ http://kushagragour.in/lab/picssel-art/ can make something like that
- leecGoimik7 14y agoDoesn't work in Opera 12.
- epascarello 14y agoMore bytes for a pixelated look!
- brownBananas 14y agoBetter version of Mona Lisa: http://codepen.io/anon/pen/zbcJq http://codepen.io/anon/pen/zbcJq
- kevsamuel 14y agoA 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 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
- lsh 14y ago"This Site Totally Doesn't Work Without JavaScript." Pure CSS my arse.