Un Homer Simpson tout en CSS… Ca peut paraître très bête, mais ce n’est pas image… C’est du code…

Homer Simpson en CSS est compatible avec Internet Explorer 5.5, 6 et 7, Opera 9, Firefox 2 et Safari 3…

o

o

o

o

 

(

O

O

O

\

L

(

O

O

O

O

O

\

L

(

O

 

 

 

 

|

|

\

\

|

|

\

\

\

\

(

(

8

o

o

o

(

(

8

o

o

o

 

o

)

)

b

o

O

o

o

o

o

o

o

)

b

o

O

o

o

o

o

o

o

o

o

o

/

/

/

 

_

_

_

C

C

 

O

(

-

Le code entier dans la suite… ;-)

<div style="width: 100%; height: 466px;"><br /><div style="border: 2px solid rgb(0, 0, 0); float: left; line-height: normal; background-color: rgb(255, 255, 255);"><br /><div style="overflow: hidden; width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px;"><br /><div style="margin-top: -0.7em;"><br /><div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;"><br /><div style="font-size: 2.57em; font-weight: bold; color: rgb(0, 0, 0);">o</div></div><br /><div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;"><br /><div style="font-size: 2.38em; font-weight: bold; color: rgb(255, 255, 255);">o</div></div><br /><div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;"><br /><div style="font-size: 2.48em; color: rgb(0, 0, 0);">o</div></div><br /><div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;"><br /><div style="font-size: 2.23em; color: rgb(255, 255, 255);">o</div></div><br /><div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;"><br /><div style="width: 0.32em; height: 0.52em; background-color: rgb(255, 255, 255);">&nbsp;</div></div><br /><div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;"><br /><div style="font-size: 0.8em; font-style: italic; color: rgb(0, 0, 0);">(</div></div><br /><div style="color: rgb(0, 0, 0);"><br /><div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;"><br /><div style="font-size: 4.57em;">O</div></div><br /><div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;"><br /><div style="font-size: 3.53em;">O</div></div><br /><div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;"><br /><div style="font-size: 4.63em;">O</div></div><br /><div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;"><br /><div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div></div><br /><div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;"><br /><div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div></div><br /><div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;"><br /><div style="overflow: hidden; font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em;">(</div></div><br /><div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;"><br /><div style="font-size: 0.7em; font-weight: bold;">O</div></div><br /><div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;"><br /><div style="font-size: 0.97em; font-weight: bold;">O</div></div></div><br /><div style="color: rgb(254, 217, 14);"><br /><div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;"><br /><div style="font-size: 4.37em;">O</div></div><br /><div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;"><br /><div style="font-size: 3.37em;">O</div></div><br /><div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;"><br /><div style="font-size: 4.42em;">O</div></div><br /><div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;"><br /><div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div></div><br /><div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;"><br /><div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div></div><br /><div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;"><br /><div style="overflow: hidden; font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em;">(</div></div><br /><div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;"><br /><div style="font-size: 0.55em; font-weight: bold;">O</div></div></div><br /><div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;"><br /><div style="width: 1.92em; height: 5.76em; background-color: rgb(254, 217, 14);">&nbsp;</div></div><br /><div style="position: absolute; padding-left: 3.7em; padding-top: 2.73em;"><br /><div style="width: 0.3em; height: 1.56em; background-color: rgb(254, 217, 14);">&nbsp;</div></div><br /><div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;"><br /><div style="width: 0.16em; height: 0.34em; background-color: rgb(254, 217, 14);">&nbsp;</div></div><br /><div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;"><br /><div style="font-size: 10px;"><br /><div style="width: 2.6em; height: 3em; background-color: rgb(254, 217, 14);">&nbsp;</div></div></div><br /><div style="color: rgb(0, 0, 0);"><br /><div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;"><br /><div style="font-size: 0.67em;">|</div></div><br /><div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;"><br /><div style="font-size: 0.67em;">|</div></div><br /><div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;"><br /><div style="font-size: 0.67em;">\</div></div><br /><div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;"><br /><div style="font-size: 0.67em;">\</div></div><br /><div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;"><br /><div style="font-size: 0.67em;">|</div></div><br /><div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;"><br /><div style="font-size: 0.67em;">|</div></div><br /><div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;"><br /><div style="font-size: 0.67em;">\</div></div><br /><div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;"><br /><div style="font-size: 0.67em;">\</div></div><br /><div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;"><br /><div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div></div><br /><div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;"><br /><div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div></div><br /><div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;"><br /><div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div></div><br /><div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;"><br /><div style="font-size: 1.11em; font-weight: bold;">(</div></div><br /><div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;"><br /><div style="font-size: 2.4em; font-weight: bold;">8</div></div><br /><div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;"><br /><div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div></div><br /><div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;"><br /><div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div></div><br /><div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;"><br /><div style="font-size: 3.06em; font-weight: bold;">o</div></div></div><br /><div style="color: rgb(205, 178, 111);"><br /><div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;"><br /><div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div></div><br /><div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;"><br /><div style="font-size: 1.04em; font-weight: bold;">(</div></div><br /><div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;"><br /><div style="font-size: 2.25em; font-weight: bold;">8</div></div><br /><div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;"><br /><div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div></div><br /><div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;"><br /><div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div></div><br /><div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;"><br /><div style="font-size: 2.87em; font-weight: bold;">o</div></div></div><br /><div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;"><br /><div style="width: 0.76em; height: 1em; background-color: rgb(205, 178, 111);">&nbsp;</div></div><br /><div style="color: rgb(0, 0, 0);"><br /><div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;"><br /><div style="font-size: 2.2em;">o</div></div><br /><div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;"><br /><div style="font-size: 1.01em;">)</div></div><br /><div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;"><br /><div style="font-size: 0.72em;">)</div></div><br /><div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;"><br /><div style="font-size: 0.94em;">b</div></div><br /><div style="position: absolute; padding-left: 4em; padding-top: 5.09em;"><br /><div style="font-size: 1.59em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;"><br /><div style="font-size: 1.95em; font-weight: bold;">O</div></div><br /><div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;"><br /><div style="font-size: 2.42em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;"><br /><div style="font-size: 2.23em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;"><br /><div style="font-size: 2.23em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;"><br /><div style="font-size: 1.9em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;"><br /><div style="font-size: 1.97em; font-weight: bold;">o</div></div></div><br /><div style="color: rgb(205, 178, 111);"><br /><div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;"><br /><div style="font-size: 2.06em;">o</div></div><br /><div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;"><br /><div style="font-size: 0.95em;">)</div></div><br /><div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;"><br /><div style="font-size: 0.88em;">b</div></div><br /><div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;"><br /><div style="font-size: 1.48em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;"><br /><div style="font-size: 1.83em; font-weight: bold;">O</div></div><br /><div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;"><br /><div style="font-size: 2.27em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;"><br /><div style="font-size: 2.09em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;"><br /><div style="font-size: 2.08em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;"><br /><div style="font-size: 1.78em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;"><br /><div style="font-size: 1.85em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;"><br /><div style="font-size: 1.93em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;"><br /><div style="font-size: 1.93em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;"><br /><div style="font-size: 1.44em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;"><br /><div style="font-size: 0.82em; font-weight: bold;">o</div></div><br /><div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;"><br /><div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: rgb(0, 0, 0);">/</div></div><br /><div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;"><br /><div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: rgb(0, 0, 0);">/</div></div><br /><div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;"><br /><div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: rgb(0, 0, 0);">/</div></div></div><br /><div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;"><br /><div style="font-size: 2.76em; font-weight: bold; color: rgb(0, 0, 0);">&bull;</div></div><br /><div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;"><br /><div style="font-size: 2.49em; font-weight: bold; color: rgb(255, 255, 255);">&bull;</div></div><br /><div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;"><br /><div style="font-size: 0.28em; font-weight: bold; color: rgb(0, 0, 0);">&bull;</div></div><br /><div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;"><br /><div style="font-size: 1.47em; font-weight: bold; color: rgb(0, 0, 0);">&bull;</div></div><br /><div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;"><br /><div style="font-size: 1.2em; font-weight: bold; color: rgb(254, 217, 14);">&bull;</div></div><br /><div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;"><br /><div style="font-size: 10px;"><br /><div style="width: 4.6em; height: 3.88em; background-color: rgb(254, 217, 14);">&nbsp;</div></div></div><br /><div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;"><br /><div style="font-size: 1.2em; color: rgb(0, 0, 0);">_</div></div><br /><div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;"><br /><div style="font-size: 1.2em; color: rgb(0, 0, 0);">_</div></div><br /><div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;"><br /><div style="font-size: 1.2em; color: rgb(0, 0, 0);">_</div></div><br /><div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;"><br /><div style="font-size: 3.04em; font-weight: bold; color: rgb(0, 0, 0);">&bull;</div></div><br /><div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;"><br /><div style="font-size: 2.77em; font-weight: bold; color: rgb(255, 255, 255);">&bull;</div></div><br /><div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;"><br /><div style="font-size: 0.28em; font-weight: bold; color: rgb(0, 0, 0);">&bull;</div></div><br /><div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;"><br /><div style="font-size: 0.66em; color: rgb(0, 0, 0);">C</div></div><br /><div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;"><br /><div style="font-size: 0.66em; color: rgb(0, 0, 0);">C</div></div><br /><div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;"><br /><div style="font-size: 10px;"><br /><div style="width: 2.2em; height: 2.2em; background-color: rgb(254, 217, 14);">&nbsp;</div></div></div><br /><div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;"><br /><div style="font-size: 0.8em; font-weight: bold; color: rgb(254, 217, 14);">O</div></div><br /><div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;"><br /><div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: rgb(0, 0, 0);">(</div></div><br /><div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;"><br /><div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: rgb(0, 0, 0);">-</div></div></div></div></div></div>



Autres articles susceptibles de vous intéresser :
  1. Mario et Homer plus vrais que nature
    Magnifique travail... ...
  2. Le Kamasutra en 28 jours avec FHM
    Une position par jour, voilà...
  3. Base Jump depuis la Tour Eiffel
    Ca s'est passé mardi (02.04.2008),...
  4. JibJab.com
    JibJab.com est un site...