Webbaukasten

Grundlage der meisten grafischen Gestaltungen unter CSS ist der HTMLContainer DIV. Dieser rechteckige Container kann exakt in der Größe bestimmt, präzise platziert werden und der Browser zeigt die Container auch dann an, wenn keine darzustellenden Inhalte in ihnen vorgesehen sind.

Bevor aber die Container gestaltet werden, ist es notwendig, den richtigen Doc- Type für das HTML-Dokument zu setzen. Der Strict-DocType zwingt die Browser zu einer W3C-konformen Interpretation und lässt keine Eigeninterpretationen zu. Die Gestaltungen werden dadurch in allen Browsern gleich angezeigt, wenn man die Notierungskonventionen strikt einhält.

Einfache Trenner

Der HR-Tag unter HTML erzeugt horizontale Linien, die Abschnitte auf einer Webseite abtrennen. Mit einem DIV kann ein solcher Trenner gestaltet werden. Wir nutzen dabei die individuell einstellbaren CSS-Border aus. Der DIV-Container wird in der Höhe auf eine durch 3 teilbare Pixelgröße justiert. Die Länge wird so gewählt, dass er die Breite des Inhaltsbereichs der Webseite abdeckt.

Um drei verschiedene Farben in die Linie zu bringen, definieren Sie einfach eine Hintergrundfarbe für das DIV sowie verschiedene Farben für die Top- und Bottom-Border. Damit anschließend alle Linien in der gleichen Höhe dargestellt werden, weisen Sie bei der Border- Definition genau ein Drittel der DIV-Höhe für jeden Rahmen zu. Ein Drittel der Fläche wird dann durch die Hintergrundfarbe des DIVs ausgefüllt.

Bei besonders kleinen Linien - Sie können Trenner mit drei Pixel Höhe definieren - ist es sehr wichtig, in der Klassendefinition für das DIV die Font-Size auf 0 Pixel zu setzen. Ansonsten wird der Browser Raum im Inneren des DIVs für die Darstellung von Texten in der Standardgröße freihalten und der Trenner wird übermäßig hoch.

Damit der Trenner an beliebiger Stelle in den HTML-Code integriert werden kann, wird der Positions-Parameter auf relative gesetzt, dadurch entfällt auch die Notwendigkeit, Top- und Left-Werte zu definieren.

Diese Technik lässt sich übrigens auch nutzen, um einfache Landesflaggen zu generieren. Sie weisen Border und Hintergrund die entsprechenden Farben zu und achten auf die Teilbarkeit der Höhe des DIVs durch 3.

Alternative Blickfangpunkte

Grafische Betonungen am Anfang eines Satzes lassen sich durch in den Text integrierte Grafiken erzeugen. Sie bieten eine gute Alternative zu Blickfangpunkten. Im Beispiel benutzen wir dafür eine Dreiecksgrundform. Wir nutzen dabei den Umstand aus, dass sich die Rahmen, die das CSS definiert, an den Ecken des DIVs nicht überlappen, sondern durch eine Diagonaltrennung voneinander abgesetzt werden. Denn wenn Sie ein DIV ohne Größenbestimmung mit gleichgroßen Rahmen versehen und die Farben etwa in unterschiedlichen Grautönen darstellen, erhalten Sie eine von oben betrachtete Pyramide. Diese besteht aber aufgrund der Diagonaltrennung aus nichts anderem als vier gleichseitigen Dreiecken, deren Spitzen ins Zentrum der quadratischen Form weisen.

Die Rahmenfarbe

Durch geschicktes Wählen der Rahmenfarben kann jedes der vier Dreiecke unisono dargestellt werden. Ein nach rechts weisendes Dreieck erhalten Sie dadurch, dass die Rahmenfarbe links beliebig gewählt wird und die Rahmenfarben der übrigen Seiten gleich der Hintergrundfarbe des Untergrunds gesetzt werden.

Die Größe des Dreiecks bestimmen Sie dabei ausschließlich durch die gewählten Rahmendicken. Da ein DIV wie ein P-Tag üblicherweise einen Zeilenumbruch erwirkt, muss in der Klassendefinition der Float-Parameter auf left gesetzt werden. Der Text läuft dann rechts neben dem Symbol weiter.

Wenn Sie das dreieckige Symbol mehrfarbig gestalten wollen, können Sie das durch eine Verschachtelung mehrerer DIV-Container erreichen. Zunächst wird eine Klasse für das äußere DIV generiert. Wie im Dreiecksbeispiel werden die Farben des oberen, unteren und rechten Rahmens auf die Hintergrundfarbe der Webseite gesetzt. Der linke Rahmen bekommt einer Farbe abseits der Hintergrundfarbe. Die Rahmen werden jeweils auf ein Viertel der Größe des DIVs gesetzt. Im Beispiel ist das DIV 200x200 Pixel groß. Durch Definieren der Rahmen auf jeweils 50 Pixel bleibt für den Inhalt im DIV ein Raum von 100x100 Pixeln frei.

Dieser wird für ein zweites DIV genutzt. Hier entfällt die Größendefinition, sie übernimmt die Größenbestimmung der Rahmen. Die Rahmengröße liegt hier bei 50 Pixel, sodass bereits die Rahmen alleine den gesamten Raum des inneren DIVs einnehmen.

Setzen Sie auch hier die Farben der oberen, rechten und unteren Rahmen auf die Hintergrundfarbe. Der linke Rahmen übernimmt dann die Vervollständigung des vom äußeren DIVs begonnenen Dreiecks und erhält dessen Farbe.

Ein kleiner Trick

Durch einen Trick erreichen Sie zusätzlich, dass die beiden Dreiecksteile mit einer zarten Linie in beliebiger Farbe abgetrennt werden. Der Trick besteht darin, dass Sie eine Hintergrundfarbe im äußeren DIV bestimmen. Die ist im Normalfall nicht sichtbar, da das innere DIV die gesamte Inhaltsfläche des Äußeren einnimmt. Wenn Sie aber das inner DIV um ein paar Pixel nach rechts verschieben - durch Setzen eines Margin-left - dann schimmert genau in diesem Abstandsbereich die Hintergrundfarbe durch und sorgt für weitere Details in der Grafik.

Im HTML-Code definieren Sie das verschachtelte DIV mit dem folgenden Code:

Sie können diese Dreieckskonstruktionen beliebig weiterführen, wenn Sie weitere DIVs miteinander verschachteln. Achten Sie dabei darauf, dass das jeweils in einem umrahmenden DIV stehende DIV die exakte Größe besitzt, die im umrahmenden DIV für die Inhalt freigegeben wurden. Lediglich das innerste DIV wird mit 0-Pixel-Größenangaben versehen.

Die Unterteilungslinien zwischen den Dreiecksfragmenten werden jeweils über die Hintergrundfarben der umgebenen DIVs generiert. Sie können deshalb völlig frei ganz unterschiedliche Farben zuweisen.

Komplexe symmetrische Strukturen

Die verschachtelten DIV-Container erlauben komplexe symmetrische Strukturen. Jeder Container wird in unserem Beispiel durch den Inhaltsbereich und die vier Rahmen in fünf geometrische Figuren unterteilt, ein Rechteck und vier Parallelogramme. Werden die Rahmen so groß gewählt, dass kein Raum für den Hintergrund bleibt, können Sie mit vier Dreiecken fast beliebig jonglieren.

Jedes im Inhaltsbereich eines DIV verschachtelte weitere DIV erhöht die Anzahl der geometrischen Flächen. Bereits ein Konstrukt aus vier verschachtelten DIVs erzeugt demnach 20 Flächen, aus denen sich durch geschicktes Wählen der Füllfarben äußerst komplexe Gebilde erzeugen lassen.

Die Parallelogramme sind besonders geeignet, um perspektivische Strukturen zu generieren.

In einem experimentellen säulenartigen Gebilde ist diese Technik gut zu erkennen. Drei verschachtelte DIVs sind hier exakt in der Größe zueinander abgestimmt. Das äußere DIV setzt dabei einen schwarzen Rahmen über die Hintergrundfarbe um das nächste innere. Darin sind die Größen des oberen und unteren Rahmens im Verhältnis 1:5 zum linken und rechten Rahmen gesetzt. Es entsteht eine Räumlichkeit durch die Farbtrennung.

Trickreiche Farben

Die roten Blöcke, die die Säulenbasis und das Säulenobere erzeugen, entstehen durch die Hintergrundfarbe des zweiten DIV-Containers. Auch im Inneren dieses DIVs werden Rahmen gesetzt. Damit die Perspektive einheitlich bleibt, muss auch hier das Größenverhältnis der Rahmen von 1:5 eingehalten werden. Die Figur scheint immer mehr ins Innere des Bildschirms einzudringen.

Das farbverlaufenden Streifenmuster im innersten Bereich wird durch eine Anhäufung von Pipe-Zeichen generiert. Die Zeichen sind dabei einfach nebeneinander in Span-Containern codiert. Jeder Span-Container wird am Ende mit einem Break versehen, um die nächsten Pipes in die nächste Zeile zu setzen. Per Inline- Style definieren Sie die Farben einer jeden Pipe-Reihe. Ein paar leichte Veränderungen in der Farbgebung von Zeile zu Zeile erzeugen dann den Eindruck eines Farbverlaufs.

Wenn Sie solche Pipes codieren, die eine geschlossene vertikale Linie ergeben sollen, muss auf jeden Fall der übliche Abstand zwischen den Zeilen vermieden werden. Auch das erledigt CSS für Sie. Die Schriftgröße muss in diesem Fall größer sein als die Zeilenhöhe, die Zeichen laufen scheinbar ineinander über und eine geschlossene Linie erscheint (siehe Kasten).

Skalieren der Grafiken

Alle Grafiken können nahezu beliebig skaliert werden. Sie müssen lediglich die Größenwerte der Rahmen und DIVs an die gewünschten Größenverhältnisse anpassen. Natürlich können komplexe Verschachtelungen nicht auf kleinsten Raum gestaltet werden, denn eine Minimalanzahl von Pixeln wird vor allem für die Rahmendarstellung benötigt, wenn Schrägen für Dreiecks- oder Parallelogrammmerzeugung notwendig sind.

Komplexe DIV-Grafik

Die CSS-Deklaration:

Im HTML-Code: