Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Mona Lisa in pure CSS

codepen.io

Post reply on HN
Print view View original

61–70 of 97 posts

Re: Mona Lisa in pure CSS

#61

Post by lowboy »

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

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

Re: Mona Lisa in pure CSS

#62

Post by gavinpc »

woah wrote: post #56
gavinpc wrote: post #31

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.

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.

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.

Re: Mona Lisa in pure CSS

#63

Post by yozmsn »

cup wrote: post #20
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…

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?

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.

Re: Mona Lisa in pure CSS

#64

Post by 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

Re: Mona Lisa in pure CSS

#65

Post by [deleted] »

phoboslab wrote: post #14

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.

[deleted]

Re: Mona Lisa in pure CSS

#66

Post by skrebbel »

phoboslab wrote: post #14

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.

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

Re: Mona Lisa in pure CSS

#69

Post by grimlck »

lowboy wrote: post #23
phoboslab wrote: post #14

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.

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

Re: Mona Lisa in pure CSS

#70

Post by diggan »

nowarninglabel wrote: post #55

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

Codepen is just a viewer and editor for HTML, CSS and Javascript.
Post reply on HN