71–80 of 97 posts
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
Earlier quoted context omitted.
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.
With something like firebug installed, it takes about 20s to find "div#main-photo-container>noscript" holding the image on flickr in all it's glory.
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
Behold: Mona Lisa in pure html (!!), because more bytes is better.
http://codepen.io/anon/pen/lJxAe (may crash browsers)
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?
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.
The script that generated the CSS is far more impressive than the image itself, would definitely like a look at that.
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…