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.
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.
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.
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?
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.
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.
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.
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.
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 :-)
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.
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 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.
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
96 comments
[ 3.7 ms ] story [ 81.8 ms ] threadHaving said that, I like all the Mr Doob stuff and most openGL demo stuff coming out.
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)
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.
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.
http://en.wikipedia.org/wiki/Analog_hole
http://en.wikipedia.org/wiki/Digital_rights_management
Good question. I'd like to know also.
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.
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.
If your underlying method is pixels, you can render any image you want. I'm afraid I'm missing the "hack" here.
But this is nothing more than using CSS for pixels. With that logic you could theoretically create anything.
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.
http://css-tricks.com/using-css-without-html/
http://en.wikipedia.org/wiki/Lenna
(Nice hack, though; didn't know box-shadow could be abused that way)
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?
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.