Homer Simpson Coded in CSS

[ April 30th, 2008 @ 5:12 pm ] ... [ C. S. Magor ] ... [ 460 views]

Pictured above is a screenshot of the Homer Simpson CSS image. I think that you will agree that it is a highly accurate representation of the animated goof-ball. It is the creation of one Roman Cortes, who claims that the code is cross browser compatible. This is an enormously good job and while code snippets would not normally be news here, a quick look will give you an idea of what is involved. If you want to see code in its entirety, go to the Roman Cortes site and view his source; that is done by pressing Ctrl + U if you are using Firefox.

<div style="width: 100%; height: 466px;">
<div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;">
<div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;">
<div style="margin-top: -0.7em">
<div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">
<div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">
<div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div>
</div>
<div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">
<div style="font-size: 2.48em; color: #000;">o</div>

It is a true masterpiece of code work and I am guessing we are going to see a lot more of this type of stuff come out. [Roman Cortes via New Launches]

For the latest info on the coolest gadgets, emerging technology and wired madness, subscribe to our full news feed or have it delivered to your inbox. Always free. Always unique. Thanks for visiting!