IT-Kurs CSS-Grundlagen 024_Rahmen, Umriss, Schatten

Rahmen

Rahmen (Borders) in CSS sind wichtige Stileigenschaften, die verwendet werden, um visuelle Grenzen um Elemente herum zu erstellen.

Rahmeneigenschaften

• border-width: Legt die Breite des Rahmens fest.
• border-style: Legt den Stil des Rahmens fest (solid: durchgezogene Linie, dotted: gepunktete Linie, dashed: gestrichelte Linie, double: Doppellinie, groove: Rille, ridge: Erhebung, inset: eingesetzt, outset: hervorstehend, none: kein Rahmen).
• border-color: Legt die Farbe des Rahmens fest.

Beispiel:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Kurzschreibweise */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effekt:

Rahmenrichtung

border-top, border-right, border-bottom, border-left: Legen jeweils den Rahmen für oben, rechts, unten und links fest.

Beispiel:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Effekt:

Abgerundete Ecken

border-radius: Legt die abgerundeten Ecken des Rahmens fest.

Beispiel:

1
    .example1 {
2
        border-radius: 10px;
3
        /* Alle Ecken haben einen 10px Radius */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effekt:

Schatten

Der Schatten (box-shadow) in CSS ist eine Eigenschaft, die Schatteneffekte um Elemente herum erstellt. Schatten können verwendet werden, um den räumlichen Eindruck von Elementen zu verstärken und die Seite lebendiger wirken zu lassen. Durch das Hinzufügen des inset-Schlüsselworts vor dem box-shadow-Wert können innere Schatten erstellt werden. Mehrere box-shadow-Werte können durch Kommas getrennt werden, um mehrere Schatteneffekte hinzuzufügen. Wenn ein Element abgerundete Ecken hat, wird der Schatten entsprechend auf die abgerundeten Ecken angewendet.

Schatten können mehrere Parameter haben, darunter horizontaler Versatz, vertikaler Versatz, Unschärferadius, Schattenfarbe usw.

• Horizontaler Versatz (horizontal offset): Der horizontale Versatz des Schattens.
• Vertikaler Versatz (vertical offset): Der vertikale Versatz des Schattens.
• Unschärferadius (blur radius): Der Grad der Unschärfe des Schattens.
• Ausbreitungsradius (spread radius): Die Größe des Schattens, positive Werte vergrößern, negative Werte verkleinern.
• Schattenfarbe: Die Farbe des Schattens.

Beispiel:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Effekt:

Umriss

Der Umriss (outline) in CSS ist ein sichtbarer Rahmen, der um Elemente herum hinzugefügt werden kann und normalerweise verwendet wird, um die äußere Kante von Elementen hervorzuheben. Umrisse beeinflussen nicht das Layout und ändern nicht die Größe oder Position des Elements. Umrisse werden häufig für die Fokusvisualisierung von Formularelementen, den aktiven Status von Links usw. verwendet.

• outline-color: Legt die Farbe des Umrisses fest.
• outline-style: Legt den Stil des Umrisses fest.
• outline-width: Legt die Breite des Umrisses fest.
• outline-offset: Legt den Versatz des Umrisses fest, den Abstand zwischen Umriss und Rahmen.

Beispiel:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effekt: