So the history of this is short. I've seen on twitter that someone posted an image and a link with message that he created this in CSS. The link was fake, just message that this is a prank.
I can call myself a hacker as in original sense (see definition from jargon file). So I decided that it should be quick and cool hack to create a script that will generate the CSS from an image. Long ago I've created this demo CSS Draw the idea is the same. You generate bunch of box-shadow with pixels. But there would be much more data.
I've created quickly demo on Codepen:
I've used this image from placekitten.com.
First attempt was using image directly from URL but it was not working, because I was not able to get pixels using canvas, because that's blocked by Same Origin Policy. So I need to upload the file.
When I upload the file it frozen the browser few times, but with few attempts I was able to create a working demo, that generated single div CSS (later I've refactored the code a bit so it's cleaner). But there was a problem when I've tried to copy the CSS into a file. First attempt was to put the CSS into textarea, but it was too much data and browser tab frozen. Then I've tried to select the div in the Dev Tools but dev tools frozen when I've selected the div. But the element panel was fine, because there was not to many DOM nodes. So in next attempt I was able to edit html of the style attribute and copy whole CSS. I had few problems with editors on my GNU/Linux box (it was few MB of data) but finally I was able to create simple html page with single div. You can see it at jcu.bi/kitten-css. The file have 3.3MB of data, and there are almost no HTML.
After some time I've updated the demo and added file download of the output HTML file that can be use standalone. Also changed rgb colors to hex, that made the output little bit smaller.
Please share in comments what you think about this hack, and follow me on twitter @jcubic.
Top comments (0)