Bilder und Grafiken nur mit CSS erstellt

« Webentwicklerinnen/ Webentwickler und Webdesignerinnen/ Webdesigner 2008 Wordpress sicherer machen ::: ohne den sonst existierenden admin »

Bilder und Grafiken nur mit CSS erstellt

6. Mai 2008 ute

Eule nur mit CSS
Haus nur mit CSS
Herz nur mit CSS
Homer 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”>
`
´

(
)
^
^
V
O

O
o
o
SIGT.net
Historias de bloggers con insomnio
</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.

2 Reaktionen zu “Bilder und Grafiken nur mit CSS erstellt”

Webstandard-Team Am 6. Mai 2008 um 10:18 Uhr
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 Am 7. Mai 2008 um 22:03 Uhr
Ja, ich denke solche Beispiele machen einfach Spaß, darum sollten sie möglichst viele sehen können.

miradlo bloggt