Mona Lisa in pure CSS • Hacker News Board

Re: Mona Lisa in pure CSS

#81

Post by acjohnson55 » Thu, Oct 04, 2012, 10:16 AM UTC

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

Re: Mona Lisa in pure CSS

#82

Post by egeozcan » Thu, Oct 04, 2012, 11:23 AM UTC

grimlck wrote: post #69

lowboy wrote: post #23

Earlier quoted context omitted.

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

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.

Re: Mona Lisa in pure CSS

#83

Post by darkstalker » Thu, Oct 04, 2012, 12:19 PM UTC

______ wrote: post #41

lowboy wrote: post #22

Earlier quoted context omitted.

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/

Works for me on Firefox 15 (linux)

Re: Mona Lisa in pure CSS

#84

Post by jayflux » Thu, Oct 04, 2012, 12:44 PM UTC

jere wrote: post #17

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

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.

Re: Mona Lisa in pure CSS

#85

Post by cousin_it » Thu, Oct 04, 2012, 12:45 PM UTC

pan69 wrote: post #16

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…

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

Re: Mona Lisa in pure CSS

#86

Post by kidh0 » Thu, Oct 04, 2012, 12:57 PM UTC

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

Re: Mona Lisa in pure CSS

#87

Post by leecGoimik7 » Thu, Oct 04, 2012, 1:49 PM UTC

Doesn't work in Opera 12.

Re: Mona Lisa in pure CSS

#88

Post by epascarello » Thu, Oct 04, 2012, 2:29 PM UTC

More bytes for a pixelated look!

Re: Mona Lisa in pure CSS

#89

Post by brownBananas » Thu, Oct 04, 2012, 2:49 PM UTC

Better version of Mona Lisa:

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

Re: Mona Lisa in pure CSS

#90

Post by TazeTSchnitzel » Thu, Oct 04, 2012, 4:07 PM UTC

josteink wrote: post #75

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…

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.