Rahmen und Konturen
Rahmen
Rahmen sind das meist genutzt Mittel um Umrandungen um Elemente darzustellen. Im CSS Boxmodell sind sie zwischen dem Außen- und dem Innenabstand angeordnet und zählen nicht mit in die Breite/Höhe eines Elements, es macht das Element also ein wenig größer.
border: Rahmen
Werte: Werte für border-color, border-style, border-width bzw. die entsprechenden Eigenschaften für die einzelnen Seiten
border ist die zentrale Eigenschaft für Rahmen. Sie kann alle Werte -color, -style und -width Eigenschaften annehmen und ist somit die Kurzschreibweise. Äquivalent dazu existieren noch Eigenschaften für jede Seite, die sie wie border verhalten (border-left, border-top, border-right, border-bottom).
border-color: Rahmenfarbe
Werte: Farbwerte
Diese Eigenschaft legt die Farbe des Rahmens fest. Dazu können alle gebräuchlichen Farbwerte angegeben werden. Auch hier existieren Eigenschaften für jede einzelne Seite (border-left-color , border-top-color, border-right-color, border-bottom-color)
border-style: Rahmenstil
Werte: Rahmenstile
Durch diese Eigenschaft wird der Stil des Rahmens festgelegt. Es existieren für jede Seite eigene Eigenschaften (border-left-style , border-top-style, border-right-style, border-bottom-style).
border-width: Rahmenbreite
Werte: Längenangaben
Diese Eigenschaft legt die Breite von Rahmen fest. Dabei können alle gebräuchlichen Längeneinheiten eingesetzt werden, es existiert für jede Seite eine eigene Eigenschaft (border-left-width, border-top-width, border-right-width, border-bottom-width).
border-radius: Abgerundete Ecken
Werte: Längenangaben
Diese Eigenschaft legt fest, dass ein Block-Element abgerundete Ecken bekommt. Mithilfe mehrerer Werte sind auch elliptische Rundungen möglich.
Auch hier sind für bestimmte Ecken spezifische Angaben mit border-top-radius usw. möglich.
border-image: Bilder als Rahmen verwenden
Werte: url(), none
Mit dieser Eigenschaft lässt sich - ähnlich wie mit background-image - ein Hintergrundbild, aber für den Rahmenbereich festlegen.
Konturen
Seit CSS2.1 können zusätzlich zu Rahmen auch Konturen definiert werden. Optisch sehen diese wie Rahmen aus, jedoch nehmen Konturen keinen Platz ein und beeinflussen weder die Größe, noch die Position eines Elements. Sie werden einfach über die normale Zeichenebene gezeichnet. Dabei erscheint die Kontor außerhalb des Rahmens.
Konturen dienen dazu Elemente einfach für den Benutzer hervorzuheben. Damit kann z.B. dem Benutzer gezeigt werden, welches Element gerade aktiv ist, oder eine Rückmeldung gegeben werden, wenn er über einen Link/Knopf fährt.
Die Werte, die der Kontur gegeben werden können, entsprechen denen von Rahmen. Es können jedoch nicht wie bei Rahmen für alle vier Seiten verschiedene Werte angegeben werden.
Die Konturlinie folgt nicht einer abgerundeten Ecken aus CSS3; d.h. dass die Elemente immer in rechteckiger Form umspannt werden.
outline: Kontur
Werte: Werte für outline-color, outline-style, outline-width
outline stellt die Haupteigenschaft der Kontur dar. Sie kann Werte für die 3 anderen Kontur-Eigenschaften annehmen und stellt somit die Kurzschreibweise dar.
outline-color: Konturfarbe
Werte: Farbwerte
Mit der Eigenschaft outline-color kann ähnlich wie bei Rahmen, die Konturfarbe festgelegt werden. Gültig sind hier alle gängigen CSS-Farbangaben, die aus dem entsprechenden Artikel entnommen werden können.
outline-style: Konturstil
Werte: Rahmenstile
Durch die Eigenschaft outline-style kann das Aussehen der Kontur eingestellt werden. Die Werte entsprechen denen von Rahmen.
outline-width: Konturbreite
Die Eigenschaft outline-width gibt die Breite der Konturen an. Als Werte können beliebige Längeneinheiten verwendet werden.
outline-offset: Konturabstand
Werte: Längenangaben
Durch die Eigenschaft outline-offset wird der Abstand zwischen der Kontur und dem Rahmen definiert. Dies ist eine CSS3 Eigenschaft.
Rahmenstile
Hinweis: Der Internet Explorer zeigt dotted erst ab einer Rahmendicke von mindestens 2px und dashed fehlerbehaftet an.
| Rahmenstil |
Bedeutung |
none |
kein Rahmen |
hidden |
versteckter Rahmen |
solid |
durchgezogene Linie |
dashed |
gestrichelte Linie |
dotted |
gepunktete Linie |
double |
doppelte durchgezogene Linie |
groove |
3D-Rahmen (spitz, Typ 1) |
ridge |
3D-Rahmen (spitz, Typ 2) |
inset |
3D-Rahmen (hervorgehoben) |
outset |
3D-Rahmen (eingedrückt) |
Weiterführend
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Rahmen und Konturen" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Rahmen und Konturen" hier bearbeiten.
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Webdevelopment und ist unter anderem Geschäftsführer der Team23 GbR, sowie Webmasterpro.de.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
Student.
-
ist Student für Kommunikationsdesign an der renommierten Hochschule für Gestaltung (Univeristy of Arts and Design) Karlsruhe. Außerdem ist er Webdesign Critic bei pleasecritiqueme.com. Er betreibt hier sein Online-Portfolio und Weblog. Gerne schreibt er auch aus der Er-Perspektive.
gibts eigtl kein...
..outline-bottom etc ?
Re: gibts eigtl kein...
nein
outline-offset
Nicht zu vergessen ist die Eigenschaft
outline-offset. Hier die Spezifikation dazu. Sorry, dass ich immer nur kommentiere und nicht selber reinschreibe, hab leider nicht viel Zeit.Re: outline-offset
danke, ich hatte wieder nur in den 2.1 specs geschaut.