CSS mit Adi Prinz

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

• Farbangabe
• transparent

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

• Längenangabe
• Prozentwert

border-radius

Mit border-radius steht wiederum eine Zusammenfassung zur Verfügung. Dabei ist die Reihenfolge zu beachten. Die Reihenfolge lautet:

1. top-left
2. top-right
3. bottom-right
4. 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;
}

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

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 */
}

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

1. ellipse (standard)
2. circle

Mögliche Werte für size

1. farthest-side: entfernteste Seite (Standard)
2. closest-side: naheste Seite
3. farthest-corner: entfernteste Ecke
4. closest-corner: naheste Ecke

Mögliche Werte für position

1. center (standard)
2. 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);
}  

box-shadow

Die box-shadow-Eigenschaft beinhaltet 2 bis 4 Längenangeben (keine Prozentwerte) für den horizontalen- und vertikalen Abstand (offset), den optionalen Weichzeichner (blur), den optionalen Vergrößerungsfaktor (spread) und eine optionale Farbe (color). Falls color nicht definiert wird bekommt der Schatten eine schwarze Farbe.

Syntaxbeschreibung von box-shadow

• horizontal offset: Längenangabe für die horizontale Verschiebung (positive oder negative Werte)
• vertical offset: Längenangabe für die vertikale Verschiebung (positive oder negative Werte)
• blur: Längenangabe für Weichzeichner - Optional
• spread: Längenangabe für Schattengröße (positive oder negative Werte) - Optional
• color: Farbangabe - Optional
• inset: Schatteneffekt nach innen- Optional
• none: kein Schatten (Standardwert)

#element {
  padding: 20px;
  background-color: white;
  color: #222;
  margin: 50px auto 100px;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  box-shadow: 1em 1em 1em purple;
}

Box Shadow Spread
W3school Play It

Mit box-shadow können auch mehrere Schatteneffekte erzeugt werden. Als Trennzeichen wird das Komma verwendet.

  box-shadow: 1em 1em 1em purple, inset 10px 10px;