Rahmen und Konturen

0 | 18557 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Rahmen und Konturen" mit Ihrem Wissen!

Anzeige Hier werben

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.

Bild zu Rahmen und Konturen
Verschiedene Rahmen

border: Rahmen

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: border und entsprechende Seiteneigenschaften

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: border-color und entsprechende Seiteneigenschaften

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: border-style und entsprechende Seiteneigenschaften

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: border-width und entsprechende Seiteneigenschaften

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).

Firefox3.6Unterstützt4+Unterstützt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS3: border-radius

border-radius: Abgerundete Ecken

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.

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Nein
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS3: border-image

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.

Bild zu Rahmen und Konturen
Beispiel für eine Konturlinie

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

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS2.1: outline

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

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS2.1: outline-color

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

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS2.1: outline-style

Werte: Rahmenstile

Durch die Eigenschaft outline-style kann das Aussehen der Kontur eingestellt werden. Die Werte entsprechen denen von Rahmen.

outline-width: Konturbreite

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS2.1: outline-width

Die Eigenschaft outline-width gibt die Breite der Konturen an. Als Werte können beliebige Längeneinheiten verwendet werden.

outline-offset: Konturabstand

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unbekannt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS3: outline-offset

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
Beispiel
none
kein Rahmen
hidden
versteckter Rahmen
solid
durchgezogene Linie
Bild zu Rahmen und Konturen
solid

dashed
gestrichelte Linie
Bild zu Rahmen und Konturen
dashed

dotted
gepunktete Linie
Bild zu Rahmen und Konturen
dotted

double
doppelte durchgezogene Linie
Bild zu Rahmen und Konturen
double

groove
3D-Rahmen (spitz, Typ 1)
Bild zu Rahmen und Konturen
groove

ridge
3D-Rahmen (spitz, Typ 2)
Bild zu Rahmen und Konturen
ridge

inset
3D-Rahmen (hervorgehoben)
Bild zu Rahmen und Konturen
inset

outset
3D-Rahmen (eingedrückt)
Bild zu Rahmen und Konturen
outset

Weiterführend


Wikiseite bearbeiten

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.

Mitarbeiter
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 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.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.