CSS/Tutorials/Hintergrund/äußere Gestaltung
Grundsätzlich haben die meisten HTML-Elemente einen transparenten Hintergund und keinen Rahmen. Mit den border-…-Eigenschaften, aber auch mit box-shadow und outline können Sie auf vielfältige Weise Rahmen definieren.
Rahmendefinitionen können dazu führen, 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 dem Rahmen und seinem Inhalt.
Für alle Elemente können folgende Eigenschaften Anwendung finden:
- border als zusammenfassende Eigenschaft von
- border-width als zusammenfassende Eigenschaft von
- border-top-width,
- border-right-width,
- border-bottom-width,
- border-left-width
- border-style als zusammenfassende Eigenschaft von
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-color als zusammenfassende Eigenschaft von
- border-top-color,
- border-right-color,
- border-bottom-color,
- border-left-color
- border-width als zusammenfassende Eigenschaft von
- border-top als zusammenfassende Eigenschaft von
- border-top-width
- border-top-style
- border-top-color
- border-right als zusammenfassende Eigenschaft von
- border-right-width
- border-right-style
- border-right-color
- border-bottom als zusammenfassende Eigenschaft von
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left als zusammenfassende Eigenschaft von
- border-left-width
- border-left-style
- border-left-color
- border-radius als zusammenfassende Eigenschaft von
- border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- border-image als zusammenfassende Eigenschaft von
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
Für Rahmen von Tabellenzellen können zudem folgende Eigenschaften Verwendung finden:
Inhaltsverzeichnis
border[Bearbeiten]
Mit der border-Eigenschaft können Sie das Aussehen eines Rahmens um ein Element bestimmen. Sie ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.
alle Seiten eines Elements[Bearbeiten]
Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:
#one {
border: 20px solid red;
}
#two {
border: 5px dotted red;
}
#three {
border: 20px groove red;
}
#four {
border: 20px ridge red;
}
#five {
border: 20px inset red;
}
#six {
border: 20px outset red;
}
#seven {
border-width: 20px;
border-style: solid;
border-color: red blue yellow green;
}
#eight {
border: 20px double red;
border-radius: 20px;
}
#nine {
border: 20px dashed red;
border-radius: 50%;
}
#ten {
border: 10px solid red;
outline: 10px solid blue;
box-shadow: 0 0 0 10px yellow inset;
}
Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.
Hinweis
border: width style color;.einzelne Seiten eines Elements[Bearbeiten]
Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.
-
border-topdefiniert eine zusammenhängende Angabe für oben, -
border-rightfür rechts, -
border-bottomfür unten und -
border-leftfür links.
border: 1px solid red 3px dotted green; ist nicht möglich. h2 {
border-bottom: thick double blue;
float: left;
width: 48%;
}
h2.anders {
border-bottom: medium solid blue;
float: right;
}
p {
border: 1px solid red;
width: 30em;
padding: 5px;
clear: both;
}
p.beachten {
border: none;
border-left: 5px solid #FFCCCC;
}
- Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu
floatbei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter CSS/Eigenschaften/float. - Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit
border: none;entfernt, bevor der linke Rahmen gesetzt wird.
Dreiecke mit CSS erzeugen[Bearbeiten]
Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten. Diese fanden z. B. bei Weiter-Links oder Buttons Verwendung:<ref>Information on Border Slants Zeichnen von geometrischen Formen mithilfe der CSS-border-Eigenschaft<ref>
div {
border-style: solid;
border-top-color: yellow;
border-right-color: green;
border-bottom-color: blue;
border-left-color: red;
}
#slant {
border-width: 1em;
width: 4em;
height: 4em;
animation: slant 3s infinite alternate linear;
}
@keyframes slant {
0 {
width: 4em;
height: 4em;
border-width: 1em;
}
100% {
width: 0;
height: 0;
border-width: 3em;
border-color: transparent;
border-bottom-color: blue;
}
}
#slant2 {
width: 0;
height: 0;
border-width: 3em;
animation: slant2 3s infinite alternate linear;
}
{{BeispielText|
Das obere 5x5em große div hat einen 1em breiten Rand. Durch die Animation slant wird die Randstärke so weit vergrößert und die Höhe und Breite reduziert, dass schließlich nur noch der untere Rand in Form eines Dreiecks sichtbar ist.
Im unteren div wird gezeigt, wie dieses Dreieck durch unterschiedliche Werte für die einzelnen Seitenränder gestaltet werden kann.
border-radius[Bearbeiten]
Sie können für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.
Mögliche Werte:
- 1-4 Längenangaben oder Prozentwerte, es sind auch Wertepaare möglich
alle Ecken eines Elements[Bearbeiten]
#rund1 {
border-radius: 1em;
}
#rund2 {
border-radius: 1em;
border: 0;
background: red;
}
#rund3 {
border-radius: 4em/1em;
}
#rund4 {
border-radius: 50%;
width: 6em;
height: 6em;
}
- Box 1 erhält einen Radius von
1em - Box 2 hat den gleichen Radius, aber durch
border: 0;keine Randlinie, dafür aber einen roten Hintergrund, der entlang des Radius abgeschnitten wird. - Box 3 erhält als Radius ein Wertepaar
border-radius: 4em/1em; - Box 4 erhält als Radius ein Wertepaar
border-radius: 10%/10%; - Box 5 erhält als Radius ein Wertepaar
border-radius: 40%/40%;
Diese abgerundeten Ecken sind nicht gleichmäßig, da die Prozentzahlen sich auf die unterscheidliche Breite und Höhe des Elements beziehen. - Box 6 ist kreisrund, da der Radius 50% der (gleichgroßen) Höhe und Breite beträgt.
Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;
einzelne Ecken eines Elements[Bearbeiten]
Um für einzelne Seiten des Elements mit der Eigenschaft border-radius eine unterschiedliche Rahmendicke zu bestimmen, beachten Sie folgende Regeln:
- Eine Angabe: derselbe Wert gilt für alle vier Ecken
- Zwei Angaben: 1. Wert für
oben-linksundunten-rechts, 2. Wert füroben-rechtsundunten-links - Drei Angaben: 1. Wert für
oben-links, 2. Wert füroben-rechtsundunten-links, 3. Wert fürunten-rechts - 'Vier' Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts, 3. Wert für unten-rechts, 4. Wert für unten-links
Außerdem können Sie entsprechende Werte für
-
border-top-right-radius, definiert die Abrundung für oben rechts, -
border-bottom-right-radius, die Abrundung für unten rechts, -
border-bottom-left-radius, die Abrundung für unten links und -
border-top-left-radius, die Abrundung für oben links
angeben.
#rund1 {
border-radius: 1em 3em;
}
#rund2 {
border-radius: 1em 2em 3em 4em;
}
#rund3 {
border-radius: 0 1em 2em;
}
h1 {
height:2em;
text-align: center;
background-image: linear-gradient(yellow, orange, red);
border-bottom-left-radius: 10% 50%;
border-bottom-right-radius: 10% 50%;
}
- Box 1 erhält zwei Werte:
-
1em-Radius links-oben und rechts-unten -
3em-Radius rechts-oben und gegenüber
-
- Box 2 hat 4 Werte für die Ecken im Uhrzeigersinn von links oben ausgehend
- Box 3 hat 3 Werte
- der 1. Wert entspricht links oben
- der 2. Wert rechts oben
- der 3. Wert rechts unten
- da kein 4. Wert festgelegt ist, erhält die linke, untere Ecke den 2. Wert der gegenüberliegenden Ecke zugewiesen
geometrische Formen[Bearbeiten]
Mit border-radius sind auch geometrische Formen möglich:
#rund {
border-radius: 50%;
width: 6em;
height: 6em;
}
#rund8 {
border-radius: 50%;
}
#rund9 {
border: 0;
}
#rund9::after {
content: '';
height: 0;
width: 0;
border: 5em solid transparent;
border-bottom: 5em solid red;
border-radius: 50%;
}
- Box 1 wird bei gleicher Höhe und Breite mit
border-radius: 50%;zum Kreis - Box 2 hat eine größere Breite, sodass das div-Element als Oval dargestellt wird.
- Box 3 hat ein
::after-Pseudoelement mit einer Höhe und Breite von0, das aber einen 5em breiten, transparenten Rand mit einem border-radius von 50% hat. Der untere Rand erhält nun eine rote Färbung. Da die linken und rechten Ränder transparent sind, läuft die Spitze auf das 0px große div zu.
Rückblick: Runde und andere Ecken für skalierbare Boxen im Jahre 2004[Bearbeiten]
Heute ist fast schon vergessen, dass noch vor ein paar Jahren abgerundete Ecken nur unter großen Verrenkungen erreicht werden konnten:
Der Selfhtml-aktuell-Artikel Runde und andere Ecken für skalierbare Boxen von Andreas Kalt vom 05.02.2004 zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels mehrerer divs und Hintergrundgrafiken gestalten musste, um den gleichen Effekt wie mit border-radius zu erzielen.
Erst 2011 zog mit dem IE9 auch der letzte große Browser-Hersteller nach und unterstützte die border-radius-Eigenschaft.
box-decoration-break[Bearbeiten]
Die Eigenschaft box-decoration-break legt fest, wie mit Hintergründen und Rahmen zu verfahren ist, falls die Element-Box in mehrere Fragmente geteilt werden muss. Das kann etwa geschehen, wenn ein Blockelement beim Ausdrucken auf zwei Blätter verteilt wird oder ein inline-Element mehrere Zeilen beansprucht.
Details: caniuse.com
.beispiel h3 {
display: inline;
line-height: 3;
background-image: linear-gradient(to right, #df6c20 30%, #ffede0 70%);
border: 3px solid #df6c20;
border-radius: .5em;
box-shadow: .2em .2em .5em #df6c20;
margin: 1em;
padding: .3em 1em;
box-decoration-break: slice;
}
.clone h3 {
box-decoration-break: clone;
}
Mit box-decoration-break bestimmen Sie das Verhalten unterbrochener Boxen. Folgende Angaben sind möglich:
-
clone, jeder Teilbereich bekommt seinen eigenen Hintergrund und Rahmen -
slice, es wird nur ein Hintergrund und ein Rahmen dargestellt, Voreinstellung.
Wird box-decoration-break: clone; gewählt, so wird ggf. für jede einzelne Box der Hintergrund neu ermittelt, das betrifft die Werte für
Ebenso bekommt jede Box ihre eigenen
sowie
Die Außenlinie ist hingegen nicht betroffen.
Achtung!
| für Chrome, Opera, Safari | -webkit-box-decoration-break
|
|---|---|
| für Android-Browser | -webkit-box-decoration-break
|
Details: caniuse.com
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.
box-shadow[Bearbeiten]
Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.
Syntax
box-shadow: offset-x | offset-y | [blur-radius] | [spread] |[color]
-
offset-x offset-y: horizontaler und vertikaler Versatz des Schattens,
eine Längenangabe jedoch kein Prozentwert -
blur-radius: (optionaler) Weichzeicheneffekt. Der Standardwert0entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten. -
spread: (optionales) Maß für eine zusätzliche Vergrößerung des Schattens. Der Standardwert0bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt. -
color: (optionale) Farbangabe,
Standardwert ist currentColor, die Schriftfarbe des Elementes -
insetgibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden. -
none: kein Schatten (Standardwert)
div {
float: left;
width: 8em;
height: 8em;
margin: 1em;
padding: 0.5em;
background-color: beige;
}
#one {
box-shadow: 10px 10px 10px 15px grey;
}
#two {
box-shadow: 10px 0 10px grey inset;
}
#three {
box-shadow: -10px -10px 10px lightgrey inset, 10px 10px grey;
}
#three {
border: 1px solid grey;
border-radius: 5px;
box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}
#four {
border-radius: 1.5em;
border: 10px solid red;
box-shadow: 0 0 0 1em red inset;
padding: 1em;
}
#five {
box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset
}
- Box 1 hat einen Versatz von je 10px, einen Blur von 10px und einen spread von 15px
- Box 2 hat durch das Schlüsselwort
inseteinen inneliegenden Schatten nur nach rechts ohne einen Versatz auf der y-Achse - Box 3 hat einen weißen Innenschatten und, durch ein Komma getrennt, einen weiteren Außenschatten nach rechts unten
- Box 4 hat einen abgeschnittenen Rahmen, was sich mit border nicht erreichen lässt. Der border-radius wirkt auf das div, dann wird ein roter Innenschatten von 1em drübergelegt.
- Box 5 hat einen roten Innenschatten, der an beiden Seiten aber durch einen khaki-farbenen Innenschatten verdeckt wird, sodass es zu einer verkürzten Unterstreichung kommt.
Mehrere Schatten werden durch Kommata getrennt, sie werden dabei in umgekehrter Reihenfolge übereinander gelegt, dass heißt der zuerst genannte Schatten liegt ganz oben.
Hinweis zum Internet Explorer: Ein table Element mit border-collapse:collapse zeigt keinen box-shadow an.
Kennzeichnung von Links mit box-shadow[Bearbeiten]
Links erhalten bei :hover oft einen andersfarbigen Hintergrund. Dafür können sie anstelle der background-Eigenschaft auch box-shadow verwenden und mit transition einen weichen Übergang zwischen den Zuständen realisieren:
a {
color: blue;
box-shadow: inset 0 -3px 0 -1px blue;
padding: .25em 0;
text-decoration: none;
transition: all .5s;
}
a:hover,
a:focus {
box-shadow: inset 0 -30px 0 skyblue;
}
Dabei wird die Unterstreichung aber nicht mit
text-decoration:underline realisiert, sondern durch einen scharfen Innenschatten. Wenn das Link-Element den Fokus erhält, wird der Innenschatten über die gesamte Fläche vergößert und wirkt nun nicht mehr als Unterstreichung, sondern als jetzt (hellerer) Hintergrund, da auch die Farbangabe geändert wurde.Siehe auch
- text-shadow
- filter: drop-shadow()
- Grafik/Farbkonzept/Licht und Schatten
- SVG/Tutorials/Filter/Licht und Schatten
- SVG/Tutorials/Texteffekte
outline[Bearbeiten]
Dieser Artikel beschreibt die CSS-Eigenschaft outline. Für die Struktur eines HTML-Dokuments siehe HTML/outline.
Mit den outline-…-Eigenschaften können Sie auf vielfältige Weise für ein Element eine Außenlinie festlegen.
Für alle Elemente können folgende Eigenschaften Anwendung finden
- outline als zusammenfassende Eigenschaft von
- outline-offset
Die Eigenschaft outline orientiert sich, im Gegensatz zu den border-Eigenschaften nicht an rechteckigen Blöcken, sondern ist explizit als „Rahmen für nicht-rechteckige Bereiche“ definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt „draufgemalt“, ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, separate Angaben für oben, unten, links oder rechts zu machen. Vergleichen Sie am besten die Beispiele zu outline und border, um den Unterschied zu verstehen.
p { width: 30em; padding: 1em; margin: 3em; background-color: lightgrey; }
.outline { outline: 1em solid green; }
.border { border: 1em solid red; border-radius: 1em; }
Mit outline können Sie das Aussehen einer Außenlinie um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Typ und Farbe mit Leerzeichen dazwischen.
Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.
Hinweis
outline: width style color;.invert nicht in dieser Kurzschreibweise zu akzeptieren. Notiert man dagegen alle Eigenschaften einzeln, interpretiert Firefox dagegen auch diesen Farbwert korrekt (vgl. Beispiel zu outline-color).Beachten Sie das unterschiedliche Verhalten des Rahmens bei Inline-Elementen, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.
p { width: 15em; line-height: 2; }
span { padding: .1em .5em; }
.border { border: 2px solid red; }
.outline { outline: 2px solid green; }
Für den Rahmen können Sie dieses Verhalten mit der Eigenschaft box-decoration-break steuern.
outline-offset[Bearbeiten]
Durch die Eigenschaft outline-offset können Sie den Abstand zwischen der Rahmenlinie (border) und der Außenlinie (outline) bestimmen. Erlaubt ist eine numerische Angabe.
Details: caniuse.com
p {
background-color: white;
margin: 3em;
padding: 1em;
width: 30em;
}
.outline {
outline: 1em solid green;
outline-offset: 1em;
}
.border { border: 1em solid red; }
Weblinks[Bearbeiten]
- W3C: the-border-radius
- bittersmann.de: Übersicht verschiedener Angaben für
border-radius - simurai: BonBon Sweet CSS3 Buttons Buttons mit sehr unterschiedlichen geometrischen Formen.
- W3C: Drop Shadows: the ‘box-shadow’ property
- css-tricks: Breaking down CSS Box Shadow vs. Drop Shadow von Geoff Graham (20.10.2017)
solid) roten Rahmen.dotted) von 2px Breite.groove,ridge,insetundoutseteinen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.doubleeinen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.dashed) und einen border-radius von 50%.