Optische Täuschung

Eine Vase – oder zwei Gesichter?

Die Illusion ist nicht neu – neu an der Darstellung hier ist, dass es sich nicht um eine Grafik handelt, sondern dass das Bild vollständig mit Stylesheets erstellt wurde. Wer wissen will, wie es mit CSS gemacht wird, findet hier die Erklärung.

Ob das praktisch ist? Ich weiß es nicht, das möge jeder für sich selbst beurteilen.

My inspiration to try out this experiment came from Tantek Celik's Study of Regular Polygons (credit where credit's due).

Was das Auge hier tut

Die Täuschung beruht auf der Frage, welcher Teil einer Fläche als Figur und welcher als Hintergrund gelesen wird. Bei einem eindeutigen Bild entscheidet das Gehirn sofort und unbewusst; hier ist die Fläche so aufgeteilt, dass beide Lesarten gleich plausibel sind, und deshalb kippt der Eindruck hin und her. Beide Deutungen zugleich zu sehen, gelingt nicht – das Umschalten selbst ist der Effekt.

Für die Umsetzung in CSS heißt das: Es gibt kein Motiv, das gezeichnet würde, sondern nur zwei Farbflächen mit einer gemeinsamen Kante. Die Kante ist das Bild. Deshalb funktioniert die Darstellung auch nur so lange, wie sich die beiden Farben ähnlich stark vom Umfeld abheben – sobald eine deutlich dunkler ist als die andere, gewinnt sie als Figur, und das Kippen hört auf.

Was daran Stylesheet ist

Die Umsetzung braucht keine Grafik, sondern nur Boxen, Hintergrundfarben und exakt gesetzte Maße. Genau das war 2004 die eigentliche Aussage des Beispiels: Ein Stylesheet gestaltet nicht nur vorhandenen Text, es kann eine Fläche selbst erzeugen. Zu einer Zeit, in der die meisten Seiten ihre gesamte Optik aus Bildern in Tabellenzellen bezogen, war das ein Argument.

Der praktische Nutzen war überschaubar, und der Text sagt das selbst. Der Erkenntniswert liegt woanders: Wer eine solche Fläche baut, muss verstehen, wie sich die Breite einer Box aus Inhalt, Innenabstand und Rahmen zusammensetzt, wie benachbarte Blöcke aufeinandertreffen und wo ein Außenabstand mit dem nächsten zusammenfällt. Ein Pixel Abweichung zerstört die Illusion – ein unbestechlicher Prüfstein für das Verständnis des Box-Modells.

Grenzen und heutige Mittel

Eine mit Farbflächen gebaute Grafik hat zwei Grenzen. Sie ist auf gerade Kanten angewiesen, solange nur Rahmen und Rechtecke zur Verfügung stehen, und sie ist für die Sprachausgabe nicht vorhanden: Es gibt kein Bild, also auch keinen Alternativtext. Trägt eine solche Fläche Bedeutung, gehört sie beschriftet – über eine Rolle und einen zugeordneten Namen oder schlicht über eine Bildunterschrift.

Heute stehen für dieselbe Aufgabe Verläufe, beschnittene Formen und Filter bereit, und für alles Aufwendigere die eingebettete Vektorgrafik, die zudem verlustfrei skaliert und einen Alternativtext aufnehmen kann. Die Rechteck-Technik bleibt trotzdem lehrreich, weil sie sichtbar macht, was jede Box ohnehin ist: eine farbige Fläche mit genau berechneten Kanten.

Bilder aus Stylesheets: was daraus geworden ist

Aus dem Kunststück von damals ist ein eigenes kleines Feld geworden. Es gibt Wettbewerbe, in denen ein Motiv aus einem einzigen Element und einer Handvoll Verläufen entsteht, und Sammlungen mit Porträts, Landschaften und beweglichen Szenen, die ohne eine einzige Bilddatei auskommen. Der Reiz ist derselbe geblieben: Man zwingt ein Werkzeug, das für Textgestaltung gedacht ist, zu etwas, wofür es nicht gedacht war, und lernt dabei seine Regeln genauer kennen als in jedem Tutorial.

Für Produktionsseiten bleibt die Empfehlung trotzdem eindeutig. Ein aufwendiges Motiv aus Dutzenden verschachtelten Boxen ist schwer zu pflegen, kostet beim Zeichnen mehr als eine Grafik und trägt keinen Alternativtext. Sinnvoll ist die Technik dort, wo sie wenig Aufwand macht und etwas kann, was ein Bild nicht kann: eine Form, die mit der Schriftgröße wächst, eine Farbe, die aus einer Variablen kommt, ein Muster, das sich über eine beliebig große Fläche wiederholt, ohne größer zu werden.

Ein letzter Punkt spricht für die Zurückhaltung: Wer ein Motiv aus Boxen baut, legt sich auf eine bestimmte Schriftgröße, eine bestimmte Fensterbreite und ein bestimmtes Verhalten beim Runden von Bruchteilen eines Pixels fest. Schon eine leicht abweichende Vergrößerung im Browser verschiebt Kanten, die aufeinandertreffen müssten. Eine Vektorgrafik kennt dieses Problem nicht, weil sie als Ganzes skaliert statt aus einzeln gerundeten Kästen zu bestehen.

Beispiele

Die Beispiele sind eigenständige Dokumente und werden hier so dargestellt, wie ein Browser sie rendert.