If you’re thinking you’re looking at an image of The Simpsons family than yes but no. It’s Homer Simpson but it was constructed by DIV with CSS class, not an image. I’m always a big fan of The Simpsons so when I saw Roman Cortes’s Homer CSS, I though I would make one of my own. Well the problem is I’m too lazy to construct such a big HTML & CSS like that so I made an application to do it for me and here is the series of it. You could make one of your own as well by using the Web Service bellow or download the Source Code to play around with it.

The whole idea is for fun only. I can’t seem to find another reason why I make it. As a developer, it’s always fun when I make a strange thing.

Play around with it

If you’re using Firefox and have Firebug plug-in installed in it. Turn on the inspect mode and move over the image. You will see you could select the different divs. Click on a div and change the “.line div” setting.

Let’s add

border:1px solid #000000;

And see what you did to the picture.

The web service: CSSFromDraw

This is the web service. Feel free to use it. It will return the links of two files, one for CSS and one for HTML. Right click on the link and save it to your computer if you want to download it or simply click on it to view online.

You could download the source file here if you want to play around with the code: CSS2LifeWS

Notice:

Don’t use too big image as the render engine of the browsers can’t cope with the high volumn of data.

Also, the lower the colors of the image the lighter the result.

Algorithm behind

The algorithm use traditional scan-line render algorithm, which isn’t the best way.

• Start by construct the CSS file by scan over the Color palette of the image. Store it in a harsh table so we could access it later.
• Scan line by line. Find the group of pixel with the same color and create a div for it.
• Using the harsh table to find the class for that div.
• Save it in the file and return the result.

Really simple right? Well the proper algorithm should be:

• Find the biggest rectangle with the same color and create a div for that.
• Repeat by find the second biggest rectangle.
• And so on…

I still can’t make it yet. It’s actually quite fun to make something like this even it’s pointless