cssvault - inspiring creativity

This illustration of Homer Simpson was created using pure HTML and CSS. The source website is written in Spanish, and it doesn’t look like any explanation was given on the creative process. Looks like it took a lot of time to create though. Ingenious!

The resulting image displays properly across most modern browsers:

• Internet Explorer 5.5, 6 y 7
• Opera 9
• Firefox 2
• Safari 3

I have even tested it in Firefox 3 and it displays properly with no issues.

Here is the complete HTML code used to create CSS Homer:


<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>

</div>
<div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">
<div style="font-size: 2.23em; color: #fff;">o</div>
</div>
<div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">
<div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div>
</div>
<div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">
<div style="font-size: 0.8em; font-style: italic; color: #000;">(</div>
</div>
<div style="color: #000;">
<div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">
<div style="font-size: 4.57em;">O</div>
</div>

<div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">
<div style="font-size: 3.53em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">
<div style="font-size: 4.63em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">
<div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">
<div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>
</div>
<div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">

<div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
</div>
<div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">
<div style="font-size: 0.7em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">
<div style="font-size: 0.97em; font-weight: bold;">O</div>
</div>
</div>
<div style="color: #FED90E">
<div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">
<div style="font-size: 4.37em;">O</div>
</div>

<div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">
<div style="font-size: 3.37em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">
<div style="font-size: 4.42em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">
<div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">
<div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>
</div>
<div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">

<div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
</div>
<div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">
<div style="font-size: 0.55em; font-weight: bold;">O</div>
</div>
</div>
<div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">
<div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div>
</div>
<div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;">
<div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div>
</div>
<div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">
<div style="width: .16em; height: .34em; background-color: #FED90E;"></div>
</div>

<div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">
<div style="font-size: 10px">
<div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div>
</div>
</div>
<div style="color: #000;">
<div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">
<div style="font-size: 0.67em;">\</div>

</div>
<div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">
<div style="font-size: 0.67em;">\</div>
</div>
<div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">
<div style="font-size: 0.67em;">\</div>
</div>

<div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">
<div style="font-size: 0.67em;">\</div>
</div>
<div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">
<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">
<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">
<div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>
</div>
<div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">

<div style="font-size: 1.11em; font-weight: bold;">(</div>
</div>
<div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">
<div style="font-size: 2.4em; font-weight: bold;">8</div>
</div>
<div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">
<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">
<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">
<div style="font-size: 3.06em; font-weight: bold;">o</div>

</div>
</div>
<div style="color: #CDB26F">
<div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">
<div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>
</div>
<div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">
<div style="font-size: 1.04em; font-weight: bold;">(</div>
</div>
<div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">
<div style="font-size: 2.25em; font-weight: bold;">8</div>
</div>
<div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">
<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>

</div>
<div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">
<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">
<div style="font-size: 2.87em; font-weight: bold;">o</div>
</div>
</div>
<div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">
<div style="width: .76em; height: 1em; background-color: #CDB26F;"></div>
</div>
<div style="color: #000">
<div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">
<div style="font-size: 2.2em;">o</div>

</div>
<div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">
<div style="font-size: 1.01em;">)</div>
</div>
<div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">
<div style="font-size: 0.72em;">)</div>
</div>
<div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">
<div style="font-size: 0.94em;">b</div>
</div>
<div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">
<div style="font-size: 1.59em; font-weight: bold;">o</div>
</div>

<div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">
<div style="font-size: 1.95em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">
<div style="font-size: 2.42em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">
<div style="font-size: 2.23em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">
<div style="font-size: 2.23em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">

<div style="font-size: 1.9em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">
<div style="font-size: 1.97em; font-weight: bold;">o</div>
</div>
</div>
<div style="color: #CDB26F">
<div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">
<div style="font-size: 2.06em;">o</div>
</div>
<div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">
<div style="font-size: 0.95em;">)</div>
</div>

<div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">
<div style="font-size: 0.88em;">b</div>
</div>
<div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">
<div style="font-size: 1.48em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">
<div style="font-size: 1.83em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">
<div style="font-size: 2.27em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">

<div style="font-size: 2.09em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">
<div style="font-size: 2.08em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">
<div style="font-size: 1.78em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">
<div style="font-size: 1.85em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">
<div style="font-size: 1.93em; font-weight: bold;">o</div>

</div>
<div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">
<div style="font-size: 1.93em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">
<div style="font-size: 1.44em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">
<div style="font-size: 0.82em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>

<div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>
<div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>
</div>
<div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">
<div style="font-size: 2.76em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">
<div style="font-size: 2.49em; font-weight: bold; color: #fff;">•</div>
</div>
<div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">
<div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>

</div>
<div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">
<div style="font-size: 1.47em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
<div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">•</div>
</div>
<div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">
<div style="font-size: 10px">
<div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div>
</div>
</div>
<div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">
<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">

<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">
<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">
<div style="font-size: 3.04em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">
<div style="font-size: 2.77em; font-weight: bold; color: #fff;">•</div>
</div>
<div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">
<div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">

<div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
<div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
<div style="font-size: 10px">
<div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
</div>
</div>
<div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">
<div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div>
</div>
<div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">

<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">
<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div>
</div>
</div>
</div>
</div>
</div>


Share

This entry was posted on Friday, May 2nd, 2008 at 6:52 pm and is filed under CSS, Cool, Design, Inspiration. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.