webthreads.de - Web 2.0, Web-Entwicklung und Netzkultur von Markus Kühle

Das etwas andere Homer Simpson Porträt

Das hier zu sehende Homer Simpson Porträt ist nicht nur einfach ein Bild sondern ein mit Zeichen und CSS Formatiertes Kunstwerk:

Da hat sich doch tatsächlich jemand Names Roman Cortes die Mühe gemacht ein Bild von Homer Simpson rein mit HTML und CSS zu erzeugen.

Schaut man sich den Quelltext dieses Kunstwerkes an, so sieht man wie er das angestellt hat. Hier ein kleiner Ausschnitt daraus:

<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
  <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">&bull;</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>

Da möchte man gar nicht genau wissen wie lange er dafür gebraucht hat.
Zuvor hat Roman Cortes auch schon George Bush porträtiert.

Und als Highlight noch die animierte Version des Entstehen dieses Kunstwerkes. Mit der Animation kann man schnell oder langsam sehen wie das Bild entstanden ist.

Es gibt ja einige solcher CSS Bilder - mal sehen ob man noch das ein oder andere auftreiben kann.

(via webkonzepter.de)

Ähnliche Artikel, die dich interessieren könnten:

    None Found

Hinterlasse ein Kommentar »»

Bad Behavior has blocked 3035 access attempts in the last 7 days.