Rahmen
Sie können nahezu für jedes Element in HTML einen Rahmen definieren. Einem Rahmen kann eine Linienart, eine Linienstärke und eine Linienfarbe zugewiesen werden.
Zusätlich steht für jeden Rahmen die Eigenschaft Oben, Unten, Links und Rechts zur Verfügung.
border-style
Mit border-style wird die Rahmenart definiert, border-style ist nicht vererbbar.
div { border-style: solid; }
Mögliche Werte für border-style
- none: kein Rahmen
- hidden: kein Rahmen bzw. unsichtbarer Rahmen, für Tabellenzellen
- dotted: gepunktet
- dashed: gestrichelt
- solid: durchgezogen
- double: doppelt
- groove: 3D-Effekt
- ridge: 3D-Effekt
- inset: 3D-Effekt
- outset: 3D-Effekt
Die border-style Eigenschaft kann noch bis zu vier unterschiedliche Linienarten aufnehmen.
div { border-style: dotted solid double dashed; }
- top border ist dotted
- right border ist solid
- bottom border ist double
- left border ist dashed
div { border-style: dotted solid double; }
- top border ist dotted
- right und left borders sind solid
- bottom border ist double
div { border-style: dotted solid; }
- top und bottom borders sind dotted
- right und left borders sind solid
Alternativ werden mit den Eigenschaften border-bottom-style, border-top-style, border-left-style und border-right-style die vier Rahmen des Rechtecks definieren.
border-width
Mit border-width wird die Rahmenbreite (linienstärke) definiert, border-width ist nicht vererbbar.
div {
border-style: solid;
border-width: 2px;
}
Mögliche Werte für border-width
- thin: dünn
- medium: mittel
- thick: dick
- Längenangabe
Die border-width Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style.
Alternativ werden mit den Eigenschaften border-bottom-width, border-top-width, border-left-width und border-right-width die vier Rahmenbreiten des Rechtecks definieren.
border-color
Mit border-color wird die Rahmenfarbe definiert, border-color ist nicht vererbbar.
div {
border-style: solid;
border-width: 2px;
color-color: #f00;
}
Mögliche Werte für border-color
Die border-color Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style.
Alternativ werden mit den Eigenschaften border-bottom-color, border-top-color, border-left-color und border-right-color die vier Rahmenfarben des Rechtecks definieren.
border-top, border-bottom, border-left, border-right
Mit border-top, border-bottom, border-left und border-right gibt es noch eine Zusammenfassung der Rahmenseiten, diese Attribute sind nicht vererbbar.
div {
border-top: thick double #f00;
border-bottom: thick double #f00;
border-left: 2px solid #0f0;
border-right: 2px solid #0f0;
}
border
Mit border gibt es noch eine Zusammenfassung der Attribute border-color border-style border-width für alle vier Rahmenseiten. Die Reihenfolge der Angaben ist egal, border ist nicht vererbbar.
div {
border: thick double #f00;
}
border-top-right-radius, border-bottom-right-radius, border-bottom-right-radius, border-top-right-radius
Mit border-top-right-radius, border-bottom-right-radius, border-bottom-right-radius und border-top-right-radius gibt es noch die Möglichkeit eine oder
mehrere der vier Ecken abzurunden, diese Attribute sind nicht vererbbar.
div {
border: 2px solid #000;
border-bottom-left-radius: 2em;
}
Mögliche Werte für border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
border-radius
Mit border-radius steht wiederum eine Zusammenfassung zur Verfügung. Dabei ist die Reihenfolge zu beachten. Die Reihenfolge lautet:
- top-left
- top-right
- bottom-right
- bottom-left
Wenn bottom-left fehlt ist es gleich wie top-right. Wenn bottom-right fehlt ist es gleich wie top-left. Wenn top-right fehlt ist es gleich wie top-left.
Wenn sie nur eine Angabe machen, werden alle Ecken gleich abgerundet.
div {
border: 2px solid #000;
border-radius: 2em;
}
Bilder als Rahmen
Mit der Eigenschaft border-image können Sie ein Bild festlegen, das anstelle des normalen Rahmens um ein Element herum verwendet werden soll.
border-image
border-image bietet die Möglichkeit, ein Bild als Rahmen zu verwenden. Dieses Bild ersetzt eine Rahmenlinie, die mit border definiert werden muss.
Allerdings wird border-image von aktuellen Browsern nur mäßig unterstützt.
Für border-image muss man noch proprietäre Eigenschaften verwenden. Internet Explorer 10 und frühere Versionen unterstützen border-image gar nicht,
border-image ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image: url(rahmen.png) 30 repeat; /* Safari */
-o-border-image: url(rahmen.png) 30 repeat; /* Opera*/
border-image: url(rahmen.png) 30 repeat;
}
Mögliche Werte für border-image
- border-image-source: Bildpfad
- border-image-slice: Aufteilung des Bildes
- border-image-width: Breite des Bildes
- border-image-outset: Wert außerhalb des Bildrahmens
- border-image-repeat: Bildwiederholung Slice wird ggf. abgeschnitten (repeat), Bild wird gedehnt keine Wiederholung (stretch), Bildwiederholung Größe wird angepasst (round), Bildwiederholung Leerraum wird angepasst (space)
Die border-image Eigenschaft ist eine Zusammenfassung der Attribute von border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.
border-image-source
Mit border-image-source wird die Bildquelle (Pfad) definiert, border-image-source ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image-source: url(rahmen.png); /* Safari */
-o-border-image-source: url(rahmen.png); /* Opera*/
border-image-source: url(rahmen.png);
}
Mögliche Werte für border-image-source
- none: kein Bild
- url: Bildpfad
border-image-slice
Mit border-image-slice wird das Bild in Teile zerschnitten. Es sind bis zu vier Werte zum Eingeben (vier Ecken) plus das Attribut fill
für den Mittelteil des Bildes. border-image-slice ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image-slice: 30 fill; /* Safari */
-o-border-image-slice: 30 fill; /* Opera*/
border-image-slice: 30 fill;
}
Mögliche Werte für border-image-slice
- Zahl: repräsentiert Pixel bei Pixelgrafiken und Koordinaten bei Vektorgrafiken
- Prozentwert
- fill: Zusätzlicher Wert für den Mittelteil
- Eine Angabe: alle 4 Schnitte gleich
- Zwei Angaben: 1. oben und unten 2. links und rechts
- Drei Angaben: 1. oben 2. links und rechts 3. unten
- Vier Angaben: 1. oben 2. rechts 3. unten 4. links
border-image-width
Mit border-image-width wird die Breite des Bildrahmens definiert. Es sind bis zu vier Werte zum Eingeben bzw auto, border-image-width ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image-width: 30px 10px; /* Safari */
-o-border-image-width: 30px 10px; /* Opera*/
border-image-width: 30px 10px;
}
Mögliche Werte für border-image-width
- Längenangabe: in Pixel
- Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut
- Prozentwert
- auto: abhängig vom Attribut image-slice
border-image-outset
border-image-outset beschreibt die Eigenschaft, wie weit das Bild aus dem Rahmen hinausragen soll, border-image-outset ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image-outset: 10px; /* Safari */
-o-border-image-outset: 10px; /* Opera*/
border-image-outset: 10px;
}
Mögliche Werte für border-image-outset
- Längenangabe: in Pixel
- Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut
border-image-repeat
border-image-repeat beschreibt die Eigenschaft, wie Slices aufgeteilt werden, border-image-repeat ist nicht vererbbar.
div {
border: 10px solid transparent;
-webkit-border-image-repeat: stretch; /* Safari */
-o-border-image-repeat: stretch; /* Opera*/
border-image-repeat: stretch;
}
Mögliche Werte für border-image-repeat
- stretch: Bild wird gedehnt keine Wiederholung
- repeat: Bildwiederholung Slice wird ggf. abgeschnitten
- round: Bildwiederholung Größe wird angepasst
- slice: Bildwiederholung Leerraum wird angepasst
Hintergrund
Der Hintergrund für Absätze, Container oder andere Element kann in der Regel transparent, farbig oder ein Hintergrundbild sein. Auch Farbverläufe sind möglich.
background-color
background-color erzeugt einen farbigen Hintergrund für ein Element, background-color ist nicht vererbbar.
p { background-color: rgb(255,0,255); }
Mögliche Werte für background-color
- Farbangabe
- transparent (Standard)
background-attachment
background-attachment definiert das Verhalten von Hintergrundbilder z.B. beim Scrollen, background-attachment ist nicht vererbbar.
div { background-attachment: fixed; }
Mögliche Werte für background-attachment
- fixed: Ausrichtung am Viewport, wie position-fixed
- scroll: Ausrichtung am Elternelement, wie position-absolute (Standard)
- local: Ausrichtung am Elternelement, wie position-relative
background-image
Mit background-image fügen sie ein Hintergrundbild ein. Für den Notfall wird zusätzlich noch eine Hintergrundfarbe definiert, background-image ist nicht vererbbar.
div {
background-image: url("bg_bild.png");
background-color: #00f;
}
Mögliche Werte für background-image
- url: Pfadangabe
- none: kein Bild
background-position
Die Position wird mit zwei Längenangaben geschrieben. Der erste Wert bezeichnet die Position in x-Richtung, der zweite die in y-Richtung.
Auch negative Werte sind möglich.
Wird nur ein Wert angegeben, ist dies die horizontale Position, der fehlende Wert wird mit center dargestellt. Der Ausgangswert ist 0 0 (links, oben),
background-position ist nicht vererbbar.
div {
background-position: left bottom;
}
Mögliche Werte für background-position
- Längenangabe
- Prozentwert
- left: horizontaler Wert
- right: horizontaler Wert
- center horizontaler Wert:
- top: vertikaler Wert
- bottom: vertikaler Wert
- center: vertikaler Wert
background-repeat
Wenn sie ein Hintergrundbild einfügen wird dieses normalerweise gekachelt. Das heißt das Bild wird in x- und y-Richtung wiederholt, solange dafür Platz ist.
Mit background-repeat können sie diese Verhalten ändern, background-repeat ist nicht vererbbar.
div {
background-repeat: no-repeat;
}
Mögliche Werte für background-repeat
- repeat: Wiederholung (Standard)
- no-repeat: keine Wiederholung<
- repeat-x: Wiederholung in x-Richtung
- repeat-y: Wiederholung in y-Richtung
background-size
Mit background-size können sie die Größe des Hintergrundbildes ändern. Standardmäßig behält das Bild seine ursprüngliche Größe, background-size passt das Bild an die Größe des
Elements an. Bei Längenangaben schreiben sie zuerst die Breite (width) und dann die Höhe (height), background-size ist nicht vererbbar.
div { background-size: 100px 120px; }
Mögliche Werte für background-size
- Längenangabe
- Prozentangabe
- auto: ursprüngliche Größe (Standard)
- cover: Bildanpassung der kleineren Seite
- contain: Bildanpassung der größeren Seite
background-clip
Mit background-clip bestimmen sie , welche Bereiche der Elementbox den definierten Hintergrund erhalten. Für das Verständnis diese Atrributes müssen sie sich vorher mit dem Kapitel "Box-Model"
beschäftigen, background-clip ist nicht vererbbar.
div { background-clip: padding-box; }
Mögliche Werte für background-clip
- border-box: Hintergrund für den gesamten Bereich inkl- Rahmen (Standard)
- padding-box: Hintergrund für Content und Padding
- content-box: Hintergrund für Content
background-origin
Ähnlich wie background-clip bestimmen sie mit background-origin welche Bereiche der Elementbox das definierten Hintergrundbild erhalten. background-origin ist auch in Kombination mit
background-size möglich. Für das Verständnis diese Atrributes müssen sie sich vorher mit dem Kapitel "Box-Model" beschäftigen, background-origin ist nicht vererbbar.
div { background-origin: padding-box; }
Mögliche Werte für background-origin
- border-box: Hintergrundbild 0 0 (Standard)
- padding-box: Hintergrundbild Padding 0 0
- content-box: Hintergrundbild Content 0 0
background
background bietet ein Zusammenfssung der Hintergrundformatierung an. Die Reihenfolge dabei spielt keine Rolle, nur ein paar Dinge muss man beachten:
- background-size muss nach der Angabe background-position erfolgen Trennzeichen ist ein Slash (/)
- background-origin muss irgendwo nach der Angabe background-clip erfolgen
background ist nicht vererbbar.
div { background:
url(bg_bild.gif) /* image */
top center / 100px 120px /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
Farbverlauf als Hintergrund
Mit Farbverläufen (Gradienten) können Sie weiche Übergänge zwischen zwei oder mehreren Farben darstellen. CSS bietet uns dafür zwei Gradient-Typen,
linear-gradient und radial-gradient. Für gradient-Attribute muss man noch proprietäre Eigenschaften verwenden. Internet Explorer 10 und frühere Versionen
unterstützen gradient-Attribute gar nicht, gradient-Attribute sind nicht vererbbar.
Farbverläufe schreiben sie entweder mit dem Attribut background-image oder sie verwenden die Kurzfassung background.
linear-gradient
Standardmäßig wird ein Farbverlauf von oben nach unten erzeugt (to bottom = 180deg). Wenn kein Farbstopp definiert ist teilt CSS die angegebenen Farben
proportional auf.
.linear {
background-image: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(red, blue); /* Standard syntax */
}
Mögliche Werte für direction
Die Richtung des Farbverlaufs wird mit einer Richtungskonstante (z.B. to bottom) oder mit einem Winkelmaß (z.B. 180deg) geschrieben. Das Winkelmaß deg steht für degrees und beginnt
bei mitte oben und dreht sich im Uhrzeigersinn.
- to bottom = 180deg(Standard)
- to bottom left = 225deg
- to left = 270deg
- to top left = 315deg
- to top = 0deg
- to top right = 45deg
- to right = 90deg
- to bottom right = 135deg
.linear {
background-image: -webkit-linear-gradient(to bottom right red, blue, green); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(to bottom right red, blue, green); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(to bottom right red, blue, green); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(to bottom right red, blue, green); /* Standard syntax */
}
Jeder Farbangabe kann auch noch ein Farbstopp hinzugefügt werden. Für Farbstopps stehen Längenangaben (z.B. Pixel) oder Prozentangaben zur Verfügung:
.linear {
background-image: -webkit-linear-gradient(red 30%, blue 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(red 30%, blue 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(red 30%, blue 100%); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(red 30%, blue 100%); /* Standard syntax */
}
repeating-linear-gradient
Wenn Farbstopps kleiner 100% sind wird mit repeating-linear-gradient der Verlauf wiederholt.
.linear {
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
radial-gradient
Ein radialer Farbverlauf geht von einem definierten Mittelpunkt nach außen. Die Form kann entweder Ellipse oder Kreis sein.
Wenn nicht angegeben wird ellipse als Form verwendet, size ist farthest-corner (am entfernteste Ecke vom definierten Mittelpunkt) und position (Mittelpunkt) ist center.
Auch Farbstopps können geschrieben werden.
.radial {
background-image: -webkit-radial-gradient(red, green, blue);
background-image: -o-radial-gradient(red, green, blue);
background-image: -moz-radial-gradient(red, green, blue);
background-image: radial-gradient(red, green, blue);
}
Mögliche Werte für shape
- ellipse (standard)
- circle
Mögliche Werte für size
- farthest-side: entfernteste Seite (Standard)
- closest-side: naheste Seite
- farthest-corner: entfernteste Ecke
- closest-corner: naheste Ecke
Mögliche Werte für position
- center (standard)
- Längenangabe für x- und y-Position (z.B. 20% 40%
.radial {
background-image: -webkit-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
background-image: -o-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
background-image: -moz-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
background-image: radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
}
repeating-radial-gradient
Wenn Farbstopps kleiner 100% sind wird mit repeating-radial-gradient der Verlauf wiederholt.
.linear {
background-image: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Zusammenfassung mit background
Auch für Farbverläufe steht das zusammnenfassende Attribut backround zur Verfügung. Die beiden folgenden Anweisung bedeuten jeweils dasselbe:
background-image: radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
background-image: linear-gradient(red, blue);
background: linear-gradient(red, blue);
scharfe Übergänge
Scharfe Übergänge, also Farbübergänge ohne Verlauf erreicht man durch die Festlegung von zwei Farben an einem Ort.
.german {
background: linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
.kreise {
background: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);
}