Das Rahmen-Beispiel im Browser
|
Inhaltsverzeichnis
|
Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte ist in CSS an Eigenschaften erkennbar, die mit border- beginnen. Diese Art von Rahmen — man könnte sie auch als Schmuckrahmen bezeichnen — erweitern dem Boxmodell des W3C zufolge den Erstreckungsraum eines Elements um die Dicke der Rahmen. Die andere Sorte sollte man eher als Funktionsrahmen bezeichnen. Es handelt sich dabei um CSS-Eigenschaften, beginnend mit outline-. Im Gegensatz zu border-Rahmen erweitern outline-Rahmen nicht den Erstreckungsraum eines Elements. Auch ist der Gestaltungsspielraum bei outline-Rahmen eingeschränkter. Gedacht sind outline-Eigenschaften eher für dynamische Hervorhebungszwecke, z.B. um Suchtreffer in einem Dokument optisch hervorzuheben. Deshalb werden sie in CSS3 auch in der Spezifikation über User-Interface-CSS beschrieben, und nicht, wie border-, in der Spezifikation über Rahmen- und Hintergrundgestaltung.
Bei Schmuckrahmen (border) gibt es folgende optischen Aspekte:
Bei Funktionsrahmen (outline) sind es die folgenden Aspekte:
Wie auch bei anderen CSS-Eigenschaften haben Sie bei der Rahmengestaltung die Wahl zwischen Einzelangaben für bestimmte Rahmenseiten und Rahmenaspekte, oder zusammenfassenden Angaben. Wegen der verschiedenen optischen Aspekte von Rahmen entsteht insgesamt eine Fülle von CSS-Einzeleigenschaften. Beschrieben werden hier zunächst einmal die seit CSS 1.0 bekannten Gestaltungsaspekte Rahmendicke, Rahmenart und Rahmenfarbe.
Dazu kommen gleich mehrere zusammenfassende Eigenschaften:
<html> <head> <meta charset="utf-8"> <title>Titel</title> <style> html { background-color: white; } body { background-color: #DDD; margin: 4%; border: solid 20px #CCC; padding: 20px; } blockquote { padding: 5px; width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 1.2em; font-family: UnBatang, FreeSerif, Georgia, serif; font-size: 1.2em; background-color: white; } blockquote i { color: blue; } </style> </head> <body> <blockquote style="border-style: double; border-color: gray; border-width: 4px;"> Unsere Fehlschläge sind oft erfolgreicher als unsere Erfolge.<br> <i>Henry Ford</i> </blockquote> <blockquote style="border: outset 8px silver;"> Bei der Stapelung der Wohnungen nach oben geht zuerst der Mensch zugrunde und dann die Natur. Bei der Stapelung in die Breite läuft es umgekehrt.<br> <i>Friedensreich Hundertwasser</i> </blockquote> <blockquote style="border-left: solid 12px black; border-right: 12px solid black; border-top: 2px solid blue; border-bottom: blue 2px solid;"> Wenn zwei Philosophen zusammentreffen, ist es am vernünftigsten, wenn sie zueinander bloß 'Guten Morgen' sagen.<br> <i>Jean Paul Sartre</i> </blockquote> <blockquote style="border: dotted 2px gray;"> Wer glaubt, ein Christ zu sein, weil er die Kirche besucht, irrt sich. Man wird ja auch kein Auto, wenn man in eine Garage geht.<br> <i> Albert Schweitzer</i> </blockquote> </body> </html>
Das Beispiel enthält eine Reihe von Zitaten, die zweckgerecht als blockquote-Elemente realisiert sind. Jedes Zitat hat eine individuelle Rahmengestaltung, doch darüber hinaus haben alle Zitatbereiche auch gemeinsame Formateigenschaften. Die gemeinsamen Eigenschaften werden im style-Bereich im Dokumentkopf notiert. Die style-Attribute der einleitenden <blockquote>-Tags enthalten die individuellen Definitionen zum Rahmen.
Der Rahmentyp (border-style, border-left-style, Angaben innerhalb von border, border-left usw.) wird mit Hilfe von Schlüsselwörtern bestimmt. Typische Angaben sind solid (durchgezogene Linie), double (doppelt durchgezogene Linie) oder dotted (gepünktelter Rahmen). Nicht ganz so häufig verwendet, aber ebenfalls erlaubt sind die Angaben dashed (gestrichelter Rahmen), sowie die 3D-Effekt-Angaben inset, outset, groove und ridge.
Ebenfalls wichtig sind die Angaben none oder hidden. Denn in der Praxis kommen öfters Fälle vor, in denen Rahmen unterdrückt werden sollen. Etwa um nahtlose eingebettete Frames zu erzwingen, oder bei Grafiken im Elementinhalt von Hyperlinks. Solche Grafiken werden nämlich, wenn Sie sonst nichts angeben, vom Browser mit einem nicht besonders attraktiven Rahmen versehen. Die Angabe hidden ist für benachbarte Tabellenzellen gedacht. Während die Angabe none nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt hidden, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass auf das zugehörige table-Element die CSS-Angabe border-collapse: collapse; angewendet wird.
Die Rahmendicke (border-width, border-left-width, Angaben innerhalb von border, border-left usw.) wird wahlweise mit Hilfe der Schlüsselwörter thin (dünn), medium (mittelstark) oder thick (dick) bestimmt, oder mit Hilfe eines nummerischen Werts wie etwa 5px oder 0.4cm.
Angaben zur Rahmendicke werden nur dann interpretiert, wenn in irgendeiner Form außerdem eine Angabe zum Rahmentyp erfolgt, also etwa:
<p style="border-style:solid; border-width:thin">.
Die Rahmenfarbe (border-color, border-left-color, Angaben innerhalb von border, border-left usw.) erlaubt als Wertzuweisung alle Möglichkeiten von Farbwerte und Farbnamen, also etwa #39A5E4, rgb(230, 150, 80) oder maroon.
Auch Angaben zur Rahmenfarbe werden nur berücksichtigt, wenn außerdem der Rahmentyp angegeben wird, also etwa:
<p style="border-style:solid; border-color:red">.
Bei den zusammenfassenden Eigenschaften sind üblicherweise eine, zwei, drei oder vier Angaben erlaubt.
Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine besteht darin, Einzelangaben wie border-left-style, border-top-style usw. zu notieren. Erlaubt sind aber auch Angaben wie border-style:solid double;. Das sind unterschiedliche Angaben für die einzelnen Rahmenseiten.
Dabei gelten folgende Regeln:
Eine Angabe: die Angabe bedeutet den Rahmentyp für alle Rahmenseiten.
Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.
Bei Rahmendicke und Rahmenfarbe ist es ähnlich:
Eine Angabe: Rahmendicke oder Rahmenfarbe für alle Rahmenseiten.
Zwei Angaben: die erste Angabe bedeutet die Rahmendicke oder Rahmenfarbe für oben und unten, die zweite Angabe gilt für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke oder Rahmenfarbe für oben, die zweite die für rechts und links und die dritte die für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke oder Rahmenfarbe für oben, die zweite die für rechts, die dritte die für unten und die vierte die für links.
Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen Rahmen und Elementinhalt.
Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.
Sie benötigen keinen expliziten Rahmen um ein Element, um dem Element abgerundete Ecken zu verpassen. Es ist jedoch durchaus möglich, explizite Rahmen so wie weiter oben beschrieben mit runden Ecken zu kombinieren. Die border-radius-Eigenschaften werden erst offiziell mit CSS3 eingeführt, sind jedoch seit Jahren in der Praxis beliebt, um die web-2.0-typischen, soften Ecken zu erzwingen. Allerdings funktionieren sie noch nicht im Internet Explorer bis einschließlich Version 8.0, und auch für andere Browser (Firefox etwa) sind zum Redaktionszeitpunkt dieses Buches noch hersteller-spezifische Implementierungs-Eigenschaften wie -moz-border-radius erforderlich.
Insgesamt stehen die zusammenfassende Eigenschaft border-radius sowie die Einzeleigenschaften border-top-left-radius (linke obere Ecke), border-top-right-radius (rechte obere Ecke), border-bottom-left-radius (linke untere Ecke) und border-bottom-right-radius (rechte untere Ecke) zur Verfügung.
<html> <head> <meta charset="utf-8"> <title>Programmier-Blog</title> <style> body { background-color: #DDD; padding: 30px; font-family: monospace; font-size: 110%; } #articles { width: 60%; float: left; margin-right: 5%; } article { background-color: white; padding: 10px; margin-bottom: 2em; border-top-left-radius: 6em 3em; border-bottom-right-radius: 6em 3em; border-top-right-radius: 3em; border-bottom-left-radius: 3em; -moz-border-top-left-radius: 6em 3em; -moz-border-bottom-right-radius: 6em 3em; -moz-border-top-right-radius: 3em; -moz-border-bottom-left-radius: 3em; -webkit-border-top-left-radius: 6em 3em; -webkit-border-bottom-right-radius: 6em 3em; -webkit-border-top-right-radius: 3em; -webkit-border-bottom-left-radius: 3em; } </style> </head> <body style=""> <header> <h1 style="margin: 0; background-color: orange; color: white; font-size: 4em; font-weight: bold; padding: 12px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;">Programmier-Blog</h1> </header> <section id="articles"> <h1>Artikel</h1> <article> <h2>Programmieren mit CSS?</h2> <p>Eigentlich ist CSS ja eine Beschreibungssprache. Doch nicht selten übernimmt sie auch Aufgaben, die man auch mit JavaScript lösen könnte.</p> </article> </section> </body> </html>
Das Beispiel zeigt ein vollständiges HTML-Dokument mit einigen typischen Bestandteilen eines Blogs. Wegen der unterschiedlichen Hintergrundfarben (CSS-Eigenschaft background-color) sind die Elementboxen der Überschrift im Header-Bereich und die von Artikeln gut sichtbar. In beiden Fällen wird mit runden Ecken gearbeitet.
Sowohl die Einzeleigenschaften border-top-left-radius, border-top-right-radius, border-bottom-left-radius und border-bottom-right-radius als auch die für alle vier Ecken gültige Eigenschaft border-radius erwarten eine oder zwei nummerische Angaben. Bei zwei nummerischen Angaben sind diese durch Leerzeichen zu trennen. Mit einer Angabe können Sie eine Viertelkreisrundung bestimmen, mit zwei Angaben eine elliptische Rundung. Das obige Beispiel enthält beide Typen von Angaben. Bei der elliptischen Rundung steht der erste Wert für den X-Radius, und der zweite Wert für den Y-Radius. Nachfolgende Grafik verdeutlicht dies mit den Werten aus dem obigen Beispiel:
Bis auf weiteres ist es noch zweckmäßig, die herstellerspezifischen Implementierungseigenschaften wie -moz-border-radius oder -webkit-border-radius wie im obigen Beispiel zusätzlich zur eigentlichen Definition zu border-radius zu notieren.
Falls Sie zusätzlich zu runden Ecken mit sichtbaren Rahmen und unterschiedlichen Rahmenstärken an den einzelnen Elementseiten (border-left-width usw.) arbeiten, ist es Aufgabe der Browser, die runden Ecken korrekt zu rendern.
Für aufwändigere Rahmeneffekte steht seit CSS3 die Möglichkeit zur Verfügung, Grafiken als Basis für Rahmen zu verwenden. Wie bei den übrigen Rahmeneigenschaften gibt es auch in diesem Fall eine zusammenfassende Eigenschaft, border-image mit Namen. Daneben gibt es Einzeleigenschaften für die Detailaspekte der Rahmendefinitionen. Dies sind die Eigenschaften border-image-source (Referenzierung der Rahmengrafik), border-image-slice (Werte, die festlegen, wie die Grafik zerteilt wird), border-image-width (Bildbreite des Rahmens), border-image-outset (Offset des Bildrahmens, ähnlich wie bei outline-offset) und border-image-repeat (Art, wie das Bild die vier Seitenrahmen des Elements ausfüllen soll — z.B. durch Wiederholung oder Streckung). Die Eigenschaften border-image-width und border-image-outset spielen in der Praxis derzeit noch keine Rolle.
<div style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 1em; padding: 16px; font-size: 32px; border-width: 32px; -moz-border-image: url(border.png) 32 repeat; -webkit-border-image: url(border.png) 32 repeat; border-image: url(border.png) 32 repeat;"> RAHMENINHALT </div> <div style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 1em; padding: 16px; font-size: 32px; border-width: 32px; -moz-border-image: url(border.png) 32 stretch; -webkit-border-image: url(border.png) 32 stretch; border-image: url(border.png) 32 stretch;"> RAHMENINHALT </div>
Zunächst benötigen Sie eine Grafik, die einen Rahmen realisiert. Im obigen Beispiel ist das die nachfolgende Grafik.
Die Grafik muss nicht die Ausmaße des Elements haben, als dessen Rahmen sie dienen soll. Grafiken wie die des Beispiels eignen sich insofern gut, weil sie die für alle Bereiche des Rahmens, nämlich für die vier Ecken und die vier Seiten, klar definierte, gleich große, quadratische Bereiche enthält. Die quadratische Grafik hat eine Gesamtseitenlänge von 96 Pixeln. Jede Rahmenecke und jede Rahmenstrecke dazwischen hat demzufolge ein Drittel davon, also 32 Pixel.
Das obige Code-Beispiel zeigt, wie die Grafik in Verbindung mit der border-image-Eichgenschaft eingesetzt werden kann. Wichtig ist, dass eine geeignete Rahmendicke definiert wird. Das geschieht in den Beispielen mit Hilfe von border-width: 32px; — genau das Ausmaß der Teilquadrate der Rahmengrafik.
Die zusammenfassende border-image-Eigenschaft, wie sie im obigen Beispiel verwendet wird, erwartet mehrere Werte (derzeit typischerweise drei). Der eine ist eine Referenz auf die Rahmengrafik und entspricht der Einzeleigenschaft border-image-source. Wie auch bei anderen CSS-Eigenschaften werden solche Referenzen durch url(URL-Adresse) notiert. Bei der URL-Adresse gelten alle Regeln und Möglichkeiten der Referenzierung.
Eine weitere Angabe besteht aus einem bis maximal vier nummerischen Werten. Im obigen Beispiel ist das einfach die Zahl 32, was für 32 Pixel steht (die Seitenlänge der Einzelelemente der Beispielrahmengrafik). Diese ein bis vier Werte entsprechen der Einzeleigenschaft border-image-slicing und bestimmen die Art, wie die Rahmengrafik zerteilt wird.
Eine Angabe bedeutet: der Wert gilt für alle vier Seiten.
Bei zwei Angaben bedeutet die erste Angabe den Abstand von oben und unten, die zweite Angabe den Abstand von rechts und links.
Bei drei Angaben bedeutet die erste Angabe den Abstand von oben, die zweite den Abstand von rechts und links und die dritte den Abstand von unten.
Bei vier Angaben bedeutet die erste Angabe den Abstand von oben, die zweite den Abstand von rechts, die dritte den Abstand von unten und die vierte den Abstand von links.
Stellen Sie sich, um diese Angabe(n) besser zu verstehen, vor, Sie zerschneiden die obige Beispielrahmengrafik so, dass für jede der vier Rahmenseiten und die vier Rahmenecken jeweils ein Element entsteht. Sie beginnen beispielsweise damit, das obere Drittel der Grafik abzuschneiden. Dann ist die Höhe des Papierstreifens das, was hier als Abstand von oben bezeichnet wird. Ebenso verhält es sich mit den übrigen Schnitten.
Zahlen ohne Maßeinheit werden als Pixel interpretiert. Auch Prozentangaben sind möglich. Dabei ist die Breite bzw. Höhe der Rahmengrafik der 100%-Bezug. Außerdem gibt es noch die Möglichkeit, das Schlüsselwort fill zuzuweisen. In diesem Fall wird der mittlere Teil der Grafik (in der Beispielgrafik oben das weiße Quadrat im Zentrum) mit berücksichtigt, umd den Elementinhalt ähnlich wie eine Hintergrundgrafik zu füllen.
Die dritte Angabe bestimmt, wie die Seitenlängen der Rahmengrafik auf die tatsächlichen Seitenlängen des HTML-Element übertragen werden soll. Werfen Sie zum Verständnis nochmals einen Blick auf die obige Beispielrahmengrafik. Deren Quadrate für die Seitenlängen haben wie die übrigen Quadrate ein Ausmaß von 32 mal 32 Pixeln. Angenommen nun, das HTML-Element, auf das die Rahmengrafik angewendet wird, ist 500 Pixel breit und 356 Pixel hoch. Es müssen also irgendwie die 32 Pixel Seitenlänge auf 500 Pixel und 356 tatsächliche Seitenlängen gebracht werden. Eine Möglichkeit besteht darin, die 32 Pixel periodisch zu wiederholen. Wenn Sie das möchten, weisen Sie repeat (wiederholen) als Wert zu. Eine andere Möglichkeit ist, die 32 Pixel auf die tatsächliche Länge zu strecken — dies geschieht durch die Wertzuweisung stretch (strecken). Die beiden div-Bereiche im obigen Beispiel unterscheiden sich in den Angaben zu dieser Eigenschaft.
Da das manuelle Definieren von grafischen Rahmen doch einiges Abstraktionsvermögen verlangt, sei auf einen Web-Service verwiesen, mit dessen Hilfe sich grafische Rahmen bequem interaktiv gestalten lassen:
Funktionsrahmen können Sie wahlweise mit der zusammenfassenden Eigenschaft outline oder mit den Einzeleigenschaften outline-style (Rahmentyp), outline-width (Rahmendicke) und outline-color (Rahmenfarbe) bestimmen. Ergänzt wird dieses Ensemble durch die spezielle Eigenschaft outline-offset, mit deren Hilfe sich der Abstand des Funktionsrahmens zum Elementinhalt verändern lässt, ohne dass dabei benachbarte Elemente in ihrer Position verschoben werden.
<html> <head> <meta charset="utf-8"> <title>Titel</title> <style> p.info { outline: 4px solid orange; outline-offset: 5px; background-color: #FCE2A0; padding: 4px; } span.rahmen { outline-width: 4px; outline-style: solid; outline-color: orange; } </style> </head> <body> <p>Im <span class="rahmen">Rahmen</span> unseres heutigen Vortrags ...</p> <p class="info">... informieren wir</p> </body> </html>
Das Beispiel zeigt zwei Elemente, die einen Funktionsrahmen erhalten: ein Inline-Element (span) und ein Block-Element (p). Die Eigenschaften der Funktionsrahmen werden im Dokumentkopf in einem style-Bereich für entsprechende Klassennamen definiert.
Im Fall des p-Elements wird die zusammenfassende Eigenschaft outline verwendet. Sie erwartet eine Angabe zur Rahmendicke, zum Rahmentyp und zur Rahmenfarbe. Als Werte können Sie alles zuweisen, was auch bei der bereits beschriebenen border-Eigenschaft möglich ist. Beim span-Element werden im Beispiel die Einzeleigenschaften outline-width, outline-style und outline-color verwendet, um das Aussehen des Funktionsrahmens zu bestimmen.
Beim p-Element kommt außerdem die Eigenschaft outline-offset zum Einsatz. Der Rahmen wird dadurch im Beispiel mit 5 Pixel mehr Abstand um das Element gezogen. Dadurch werden allerdings keine Nachbarelemente anders positioniert. Notfalls überschneiden sich der Rahmen und die Inhalte von Nachbarelementen.
Bei outline-Rahmen sind derzeit keine Einzeleigenschaften für einzelne Rahmenseiten vorgesehen. Die Argumentation dahinter ist, dass Funktionsrahmen im Gegensatz zu Schmuckrahmen nur für Signaleffekte genutzt werden sollten. Typischerweise auch in Verbindung mit Scripting. Ein Anwendungsfall könnte etwa sein, beim Überprüfen von Formulareingaben den Fokus in ein Pflichtfeld zu setzen, in dem der Anwender nichts eingegeben hat. Gleichzeitig könnte das Script dafür sorgen, dass dieses Eingabefeld mittels eines outline-Rahmens signalisierend hervorgehoben wird.
(in CSS 2.0 Standard, in CSS 2.1 nicht mehr, seit CSS 3.0 wieder Standard)
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.