Convert Photos to CSS3

Few days ago I saw a link bearing the title ‘Monalisa using CSS3’ repeatedly in Facebook and Twitter. When I checked it out, I was totally impressed. A Monalisa picture made by just using CSS3 alone. To be more precise box-shadow property of CSS3 alone. It was done by Jay Salvat using a PHP program which he had uploaded on his GitHub. He has done an incredibly innovative work.

I just went through the CSS to understand what he has done and as soon as I understood, the next thing I wanted to was to create a program that produces a CSS3 made image from a given picture using my favorite tool java. I didn’t go through his implementation since I wanted to have my own algorithm to do that. Check out my implementation on GitHub repo.

All you need to give is input image’s filename in the Main.java program and it will produce photo.html which has the CSS3 made image.

Here is a sample CSS3 made image of Avatar.

It was produced by the following CSS3 code at CodePen. Check it out at my CodePen.

##How it works?

The image is made of a matrix of shadows. Each shadow carries a color almost similar to a pixel of an image. However we don’t create as many shadows equal to the number of pixels of an image. We take the average of colors of n x n pixels (n = 5 in this example, n is equal to spread) through out the image and produce a shadow for every n x n pixel block of the same color. My program does the same automatically and produces the CSS needed to replicate an image.

This idea is Jay Salvat’s and all credit goes to him. I just tried its Java implementation for Java freaks.