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>



Vous avez aimé, vous aimerez aussi