ein Blog übers Web, IT, Linux, Techiekram...

Bilder und Grafiken nur mit CSS erstellt

  • Grafik nur mit Cascading StylesheetsEule nur mit CSS
  • Grafik nur mit Cascading StylesheetsHaus nur mit CSS
  • Grafik nur mit Cascading StylesheetsHerz nur mit CSS
  • Grafik nur mit Cascading StylesheetsHomer nur mit CSS
Vieles lässt sich mit CSS machen, zumindest wenn Bilder, Grafiken und Fotos für das Layout eingesetzt werden. Tolle Beispiele bietet der css Zen-Garden auf den ich ja nicht zum ersten Mal hinweise. Beispielsweise gibt es dort bei den neuen Designs die folgenden beiden: Kyoto Forest und Under the Sea! Nicht jedes Design im Zen Garden ist in genau dieser Form praxistauglich einsetzbar, jedoch zeigen die vielen verschiedenen Layouts, welche immensen Möglichkeit CSS bietet. Denn nach wie vor gilt für den Zen Garden, dass das HTML bei allen Layouts identisch ist. In sehr viel kleinerem Umfang haben wir das mit unserem Styleswitcher auf miradlo.info umgesetzt, auch dort ist das HTML identisch, die Layouts jedoch keineswegs. Einen Überblick über die Layouts dort, gibt es im Abschnitt Layoutgalerie in verlinkten Bildern. Noch beeindruckender finde ich jedoch, Spielereien, die ganz ohne Bilder und Grafiken auskommen und trotzdem ein Bild ergeben, wie die Beispiele, die ich als Screenshots eingebunden habe.
  • Eule nur mit CSS der Autor Román Cortés hat diesen Entwurf bereits vor einigen Jahren erstellt, das Original hat bei mir, wie auf dem Screenshot einen Zeichensatzfehler. Im Code habe ich diesen korrigiert, damit sieht der Code dazu so aus:
<div id="logo"> <span style="left: 40px; top: 22px; font-size: 270px">`</span> <span style="left: 125px; top: 22px; font-size: 270px">´</span> <span style="left: 77px; top: 79px; font-size: 150px">(</span> <span style="left: 198px; top: 79px; font-size: 150px">)</span> <span style="left: 116px; top: 208px; font-size: 91px">^</span> <span style="left: 163px; top: 208px; font-size: 91px">^</span> <span style="left: 156px; top: 144px; font-size: 60px">V</span> <span style="left: 112px; top: 94px; font-size: 80px; color: #A4BF05">O</span> <span style="left: 177px; top: 94px; font-size: 80px; color: #A4BF05">O</span> <span style="left: 134px; top: 119px; font-size: 40px; color: #A4BF05; font-weight: normal">o</span> <span style="left: 199px; top: 119px; font-size: 40px; color: #A4BF05; font-weight: normal">o</span> <span style="left: 301px; top: 145px; font-size: 103px; color: #A4BF05; font-weight: normal">SIGT.net</span> <span style="left: 305px; top: 248px; font-size: 26px; font-weight: normal">Historias de bloggers con insomnio</span> </div>
  • Haus nur mit CSS das Haus ist ein ein ganzes Stück mehr Code, daher nicht praktikabel einsetzbar, aber eine klasse Spielerei
  • Herz nur mit CSS, mit diesem Beispiel kann man dank JavaScript selbst ein bisschen rumprobieren, der Text und die Textfarbe lassen sich ändern, ebenso die Qualität des Bilds, je klarer die Linien, desto mehr Code ist nötig.
  • Homer nur mit CSS, den Homer und damit die Idee zu diesem Artikel fand ich bei webstandard.kulando.de der Homer stammt ebenfalls von Román Cortés.
Sehenswert ist auch das Kontaktformular im Blog des Autors. Versucht doch mal es auszufüllen, wenn ihr nicht auf die Briefmarke klickt, wird es nicht abgeschickt. Ich mag solche Insprirationen, die mir immer wieder zeigen, dass sich trotz mancher Browserfehler, fast jede Idee in CSS umsetzen lässt.

Aktualisiert am 8.5.08

Wer es sich genauer ansehen will, sollte die animierte JavaScript-Version nehmen, die Ned Batchelder erstellt hat, insbesondere in der langsamen Animation, sieht man sehr schön, wie Homer entstand. Román Cortés war ebenfalls fasziniert davon. Bei Perun gabs den Link auf die Animation, daher diese Aktualisierung.

Noch keine Kommentare

  • Webstandard-Team
    Webstandard-Team  
    Kann Dir nur beipflichten, schöne Beispiele die Zeigen das man mit CSS einiges machen kann, was auf den ersten Blick nicht unbedingt nach reinem CSS aussieht.
  • ute
    ute  
    Ja, ich denke solche Beispiele machen einfach Spaß, darum sollten sie möglichst viele sehen können.
  • Michael Balk
    Michael Balk  
    Der Homer Simpson ist echt gelugen :-)
  • ute
    ute  
    Ja, ich finde es genial, wie er den hinbekam, da steckt richtig Zeit drin.
  • Marcus
    Marcus  
    Super Sache ;-) Ich finde den Homer wirklich sehr sehr cool, vielen Dank!

Kommentar schreiben

Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Um einen Kommentar hinterlassen zu können, erhalten Sie nach dem Kommentieren eine E-Mail mit Aktivierungslink an ihre angegebene Adresse.
BBCode-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.