La tête d’Homer Simpson en CSS ? Si vous ne connaissez pas le CSS, c’est que vous n’êtes pas un informaticien et ce qui suit ne vous intéressera pas forcément. Tous les geeks de passage en revanche apprécieront la performance du développeur.

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 dans la suite.

Si vous aussi vous voulez la tronche d’Homer Simpson en CSS, voici le code :

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

Popularité : 1% [?]

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.
  • del.icio.us
  • Scoopeo
  • Digg
  • blogmarks
  • Ma.gnolia
  • Facebook
  • MisterWong
  • Simpy
  • Google
  • Technorati

Vous avez aimé, vous aimerez aussi