Dr. O. Hoffmann
Originalität ist meistens nichts anderes als ein noch nicht entdecktes Plagiat.
Voltaire
Mir wurde vorgeschlagen, ich möchte doch mal erläutern,
wie man mit CSS kompetent und flexibel Rahmen um Dokumente macht.
Nun, an sich eine einfache Sache, solange die dafür in
CSS vorgegebenen Rahmenstile verwendet werden. Nun können sich aber viele
Leute damit nicht zufrieden geben und auch nicht mit der Aussicht,
daß es in wenigen Jahren (?) mit CSS 3 reichlich neue
Möglichkeiten geben wird, Rahmen zu gestalten, mit
abgerundete Ecken und auch durch das Einbinden diverser
Graphiken. Nun, wie macht man es aber mit CSS 2, ist da immer
noch die Frage der Ungeduldigen.
Mit welchen Tricks man bei Boxen mit Inhalt dekorative
Rahmen hinbekommt, ist ja bereits weit verbreitet im
internet. Schlüsselworte dafür sind
abgerundete Ecken,
runde Ecken oder auch
Rahmen mit abgerundete Ecken,
round corners,
rounded corners border
und dergleichen.
Die Aufgabenstellung hier liegt darin, für das
gesamte Dokument einen Rahmen zu schaffen, der das
Dokument flexibel umgibt. Da gibt es verschiedene Ansätze,
die alle den Haken haben, daß im XHTML-Quelltext ansonsten
leere div
-Elemente verwendet werden, die mit Hintergrundgraphik
verziert werden. Mit normaler Pixelgraphik solche Rahmen zu
erstellen, ist nicht so schwierig. Damit es (mir) mehr Spaß
macht, habe ich es einmal mit teiltransparenter Graphik
versucht. Entsprechend lassen sich die vorgestellten Methoden
natürlich auch auf positionierte Elemente übertragen, die
ja ein neues, eigenes Koordinatensystem aufmachen.
Da es sich um eher um eine experimentelle Spielerei handelt, ist
für eine korrekte Anzeige der Seiten also ein aktuelles
Darstellungsprogramm wie Konqueror, Opera oder Mozilla/Gecko zu
verwenden. Einzig bei der letzten Variante wurde Rücksicht
auf den microsoft internet-explorer genommen und dessen Fehler
so weit kompensiert, daß es eine passable Anzeige auch mit
diesem Programm gibt. Das ist bei den anderen Varianten auch
zumindest teilweise möglich, habe ich mir aber mal
hier erspart.
Weg zum (abgerundeten) Rahmen, Dokumentrahmen mit CSS 2
Für den selbstgemachten Rahmen wurde
ein einfaches teiltransparentes Rechteck
mit SVG als Vorlage verwendet. Diese wurde in das Pixelgraphikformat PNG
konvertiert und in Einzelstücke zerlegt:
Diese Stücke werden dann mit leeren div
-Elementen als
CSS-Hintergrundgraphiken mittels CSS
geeignet positioniert, so daß sich insgesamt wieder ein kompletter Rahmen ergibt, der sich
den Abmessungen der Seite anpaßt.
Beim letzten Stil werden gleichseitige Polygone als dekorative Symbole eingesetzt. Diese wurden mit einem kleinen PHP-Skript im Format SVG erzeugt und dann in das Format PNG konvertiert. Zum Herumspielen ist hier ein kleines Skript, die Parameter in der URI beeinflussen das Aussehen des Polygons, einfach mal ausprobieren: Polygon-Generator.