Mona Lisa in pure CSS

http://codepen.io/jaysalvat/pen/HaqBf

by jmduke • 14 years ago

240 88 14 years ago

codepen.io

jgv2• 14 years ago

this is insane

ejpastorino• 14 years ago

amazing!!!

zawaideh• 14 years ago

wahhh! box-shadow can do that?! Crazy!

andrus• 14 years ago

Cool 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• 14 years ago

http://codepen.io/anon/full/FHqiE

jimmyhwang• 14 years ago

Amazing job! How long did it take and were there any tools you used to make this faster?

borplk2• 14 years ago

It'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• 14 years ago

So 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• 14 years ago

Almost 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• 14 years ago

Extremely clever!

steffanwilliams• 14 years ago

There is a generator on Codepen that allows you to do this, that probably deserves more praise: http://codepen.io/blazeeboy/pen/bCaLE

suyash2• 14 years ago

True, 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

TazeTSchnitzel2• 14 years ago

Warning: Loading a large (e.g. 1920x1080) image will grind your computer to a halt as it fills up paged memory.

corwinstephen• 14 years ago

The best part about this is that now I know that the box-shadow property can take multiple arguments. The more you know...

jgv2• 14 years ago

7 thousand of them

dpham• 14 years ago

bet you there's a limit. 65536 maybe?

elliotlai• 14 years ago

I want a Ecce Homo version of this please ><

phoboslab• 14 years ago

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

lowboy3• 14 years ago

At least it's better than X in pure HTML5.

grimlck• 14 years ago

And that is better than the X in pure javascript posts, with X being something which was impressive 10 years ago in other languages

skrebbel• 14 years ago

It'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

notum• 14 years ago

Why not go oldschool?

Behold: Mona Lisa in pure html (!!), because more bytes is better.

http://codepen.io/anon/pen/lJxAe (may crash browsers)

pan69• 14 years ago

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

cup2• 14 years ago

While 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• 14 years ago

Clients.

jere2• 14 years ago

>So why would you invest time in trying to stop one route of copying when there is a second unstoppable?

http://en.wikipedia.org/wiki/Analog_hole

http://en.wikipedia.org/wiki/Digital_rights_management

Good question. I'd like to know also.

On another note, let's be honest. A lot of people today don't know print screen. I'd say the majority. But 10 years ago? That image to table conversion must have been a bank vault.

yozmsn• 14 years ago

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.

xutopia• 14 years ago

Screenshot?

borplk2• 14 years ago

Yeah good old times. I did exactly the same thing although not that long ago. It turned amazingly well (although yes no matter what you do the size will be higher than the original image) but the quality was identical. You can use a very small font with the ASCII square character which basically gives you pixel perfect images.

cousin_it• 14 years ago

If you want to stop people from right-clicking and saving, why not just cut the image into 16 smaller images? That would also make right-clicking and saving more difficult than screen-printing, so there's no point doing anything more advanced. For even more entertainment value, you could make the pieces irregular shaped, with transparency :-)

jere2• 14 years ago

Jeez.

If your underlying method is pixels, you can render any image you want. I'm afraid I'm missing the "hack" here.

suyash2• 14 years ago

that 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• 14 years ago

I 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• 14 years ago

We get it, you can draw anything in "pure CSS".

RKearney• 14 years ago

Not entirely. This also requires HTML.

lowboy3• 14 years ago

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

kd0amg• 14 years ago

And apparently, "This Site Totally Doesn't Work Without JavaScript."

vacri• 14 years ago

I'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• 14 years ago

I thought Lenna was the Hello World of the art community. Or is that the image processing community? :P

http://en.wikipedia.org/wiki/Lenna

vidarh• 14 years ago

And the price for most horrible abuse of box-shadow goes to....

(Nice hack, though; didn't know box-shadow could be abused that way)

gavinpc2• 14 years ago

If 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• 14 years ago

Yea, 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.

gavinpc2• 14 years ago

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

iSnow2• 14 years ago

Works just fine here in FF 15 - and even looks better than in Chrome, because the stripey distortions are missing.

christianblais• 14 years ago

But... why?

seanlinehan3• 14 years ago

Me, in 60,000 lines of pure CSS: 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

Anybody have any optimization tips?

eranation3• 14 years ago

What 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• 14 years ago

How do you know he didn't draw it by hand?

eranation3• 14 years ago

I don't, I just know I wouldn't

seanlinehan3• 14 years ago

https://gist.github.com/3831235

eranation3• 14 years ago

Did you just find it, or wrote it right now? either way, this makes the point of the top voted comment even stronger.

dj2stein9• 14 years ago

The Da Vinci's of the future will use HTMLx and CSSx instead of paint and canvas.

mukhabbat• 14 years ago

As 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

diggan3• 14 years ago

Yeah, smaller code... Only 2000 lines for something you can do with 2 or 3.

nowarninglabel• 14 years ago

It'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".

diggan3• 14 years ago

Codepen is just a viewer and editor for HTML, CSS and Javascript.

bashzor• 14 years ago

Oh come on... Let me make you one in HTML4.01! Or HTML5! Or Javascript!

Pixel by pixel... seriously.

jameshsi• 14 years ago

i 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• 14 years ago

It's in 'pure CSS', yet it requires Javascript.

fuddle• 14 years ago

Disgraceful!

diggan3• 14 years ago

How big would the CSS-image of Mona Lisa be compered to a "normal" image with the same resolution and pixel density?

josteink2• 14 years ago

So... 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• 14 years ago

Even the gzipped version is 49kb.

TazeTSchnitzel2• 14 years ago

I 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• 14 years ago

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?"

josteink2• 14 years ago

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

masonlee• 14 years ago

"Of course, it's not handcrafted" LOL

Fletch137• 14 years ago

The script that generated the CSS is far more impressive than the image itself, would definitely like a look at that.

aw3c2• 14 years ago

for each pixel coordinate and color, output an offset and color. Not sure how it is impressive.

acjohnson55• 14 years ago

No big deal. Let me know when you can do it using VIM syntax highlighting and ASCII

kidh0• 14 years ago

Seems that everybody that has plenty of time, a little bit of talent and knows this tool http://kushagragour.in/lab/picssel-art/ can make something like that

leecGoimik7• 14 years ago

Doesn't work in Opera 12.

epascarello• 14 years ago

More bytes for a pixelated look!

brownBananas• 14 years ago

Better version of Mona Lisa:

http://codepen.io/anon/pen/zbcJq

kevsamuel• 14 years ago

A 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

lsh• 14 years ago

"This Site Totally Doesn't Work Without JavaScript."

Pure CSS my arse.

Mona Lisa in pure CSS

Related Stories