
Mona Lisa in pure CSS - jmduke
http://codepen.io/jaysalvat/pen/HaqBf
======
phoboslab
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.

~~~
skrebbel
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
Why not go oldschool?

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

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

------
jere
Jeez.

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

~~~
jayflux
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.

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

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

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

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

~~~
suyash
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

*/

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

~~~
cup
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
Clients.

~~~
cup
Would it not be easier to explain to them that what they're asking for is
impossible to deliver?

~~~
gsteinb88
Sometimes, 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>

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

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

~~~
jgv
7 thousand of them

~~~
dpham
bet you there's a limit. 65536 maybe?

~~~
joshj19
Probably browser dependent. Edit: unless W3C mentioned something about it.

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

------
kevsamuel
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

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

~~~
RKearney
Not entirely. This also requires HTML.

~~~
lowboy
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.

~~~
______
You 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/>

~~~
lowboy
The example doesn't work for me on Chrome stable, Win7. So looks like we need
_some_ markup.

------
mukhabbat
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>

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

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

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

------
andrus
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
<http://codepen.io/anon/full/FHqiE>

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

~~~
seanlinehan
<https://gist.github.com/3831235>

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

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

------
elliotlai
I want a Ecce Homo version of this please ><

------
vidarh
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)

------
kidh0
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

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

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

~~~
gavinpc
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.

------
vacri
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
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>

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

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

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

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

~~~
borplk
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.

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

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

------
jameshsi
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

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

Pure CSS my arse.

------
masonlee
"Of course, it's not handcrafted" LOL

------
epascarello
More bytes for a pixelated look!

------
brownBananas
Better version of Mona Lisa:

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

------
leecGoimik7
Doesn't work in Opera 12.

------
christianblais
But... why?

------
javajosh
Extremely clever!

------
jgv
this is insane

------
bashzor
Oh _come on_... Let me make you one in HTML4.01! Or HTML5! Or Javascript!

Pixel by pixel... seriously.

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

~~~
fuddle
Disgraceful!

------
ejpastorino
amazing!!!

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

