Eigenschaften und deren Werte II

Um vernünftig mit CSS arbeiten zu können, muss man natürlich wissen, welche Eigenschaften es gibt und welche Werte diese annehmen können.

Weiter geht es mit Rahmen, Hintergründen und Übergängen (Transitions).

Die zentralen Eigenschaften dieser Lektion auf einen Blick:

/* ── RAHMEN (border) ──────────────────────────── */
div { border: 10px dashed #6666dd; }     /* Breite Stil Farbe */
div { border-radius: 1em; }              /* abgerundete Ecken */
div { border-radius: 100%; }             /* Kreis / Ellipse */
div { border-left-color: #ffff00; }     /* einzelne Seite einfärben */

/* ── HINTERGRUND (background) ─────────────────── */
div { background: #dca7a7; }
div { background: linear-gradient(#f00, #c0f); }
div { background: repeating-radial-gradient(#c0a16b, #6666dd 10%, #00A6C7 15%); }
div { background: url("img/blume.jpg") no-repeat; }
div { background-size: cover; }           /* Bild füllt den Bereich */
div { background-size: contain; }         /* Bild wird vollständig gezeigt */

/* ── ÜBERGÄNGE (transition) ───────────────────── */
div {
    transition: background 0.4s ease, transform 0.3s ease;
    /* Eigenschaft  Dauer  Verlauf */
}
div:hover {
    background: #128f76;
    transform: scale(1.05);
}

Rahmen

Für die Border wird meist eine einzige Angabe in Kurzschreibweise gemacht. Diese ist hier 3-geteilt und gibt Strichbreite, Strichart, Strichfarbe an, z.B.
border: 5px dotted #f90;

Soll eine bestimmte Rahmen-Seite angesprochen werden, wird wieder -right, -left, -top, -bottom angehängt, z.B.
border-bottom: 2px solid red;

Die 3 Eigenschaften border-width, border-style und border-color der Kurzschreibweise können aber auch einzeln angesprochen werden, auch hier ggf. wieder pro Seite:
border-left-color: blue; border-top-width: 1px;

Zusätzlich gibt es die Eigenschaft border-radius für abgerundete Ecken.
Mehr zu den Rahmen-Eigenschaften hier.

Hintergrund

Der Hintergrund background kann wieder über eine Kurzschreibweise ganz allgemein angegeben werden, oder sehr spezifisch über unterschiedliche Eigenschaften wie background-size, background-repeat, background-position konkretisiert werden.

Der Wert des Hintergrunds kann nicht nur einfach ein Farbwert sein, sondern auch ein Farbverlauf oder Hintergrundbild.
Auch über die Wiederholungsart des Hintergrunds sowie dessen Positionierung können Angaben gemacht werden.
Eine ausführliche Abhandlung aller Hintergrund-Eigenschaften und Werte findet sich z.B. hier, hier & hier.

Im Folgenden einige Beispiele:

Schatten-Effekte

Für den modernen Look dürfen Schatten-Effekte oft nicht fehlen. Es wird zwischen den Eigenschaften text-shadow und box-shadow unterschieden.

Wenig überraschend ist text-shadow für Schatten-Effekte von Text zuständig, während box-shadow auf andere Elemente angewendet wird.

Im Folgenden einige Beispiele:

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Übergänge mit Transitions

Transitions erlauben es, Werte von Eigenschaften über eine angegebene Dauer zu verändern.

Hierfür benötigt man zunächst eine Eigenschaft, die verändert werden soll, sowie eine Dauer.
Ohne Dauer wird der Übergang (transition) nie sichtbar. Sobald die angegebene Eigenschaft ihren Wert ändert, wird die Transition für die angegebene Dauer ausgelöst.