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.
Conflating positive fruition with positive value is just a positivistic error. That would mean that any fruition is beneficial by default. Unless someone made "logic in css".
It doesn't stop others from having a valid pov because a made b in a more restrictive c env.
Having said that, I like all the Mr Doob stuff and most openGL demo stuff coming out.
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.
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?"
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.
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.
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?
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.
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.
[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.
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.
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 :-)
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.
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
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.
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
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".
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.
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
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.
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.
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.
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
