Homer Simpson con CSS
Escrito por
J.F. el Jueves, 10 de Abril del 2008 a las 17:16
Increíble, pero hay gente capaz de realizar increíbles diseños simplemene con html+CSS, como es el caso de éste Homer Simpson, realizado por Román Cortés y publicado en su blog. Como el mismo comenta, Homer realizado con CSS se ve correctamente en Internet Explorer 5.5, 6 y 7, Firefox 2, Safari 3 y Opera 9.
Si quieres ver todo el código, lo puedes ver después del salto:
HTML:
-
<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>
-
<div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">
-
</div>
-
<div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">
-
-
</div>
-
<div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">
-
</div>
-
<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
-
</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>
-
<div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">
-
</div>
-
<div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">
-
</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>
Vía: | SigT
Categoría: Curiosidades, CSS |
Mantente actualizado sobre Informática Práctica suscribiéndote al feed.
Feed RSS



Abril 10th, 2008 at 17:54
¡Gracias por publicar el código! Yo *debería* haberlo hecho, pero tras horas montando mi nuevo blog, estaba demasiado cansado como para meter una ventanita de código… Queda muy bien con el código coloreado
Abril 10th, 2008 at 18:56
De nada
Para poner código con sintáxis coloreada uso el plugin iG:Syntax Hilite, tengo un tutorial explicando instalación y configuración.
Un saludo amigo
Mayo 23rd, 2008 at 3:03
Amigo, Fascinante no creí qu se pudiera hacer esto con css veo que me falta demasiado por aprender
saludos y surte con tu blog esta muy bueno.