Gestalten mit CSS3

Früher brauchte man für runde Ecken vier Bilder. Heute genügt je eine Zeile CSS. Die Vereinsseite bekommt ihr endgültiges Aussehen.

Was du am Ende kannst

Rundungen, Schatten und Verläufe einsetzen
Karten und Buttons überzeugend gestalten
Rückmeldung für Maus und Tastatur geben
Effekte sparsam und lesbar einsetzen

Live-Coding zum Mitmachen

⤓ demo-10-gestalten.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Rundungen und Schatten

Von Rahmen zu Tiefe

.reihe { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.5rem; }
.karte { width: 8rem; padding: 1rem; background: #fff; }
.a { border-radius: 0.5rem; border: 1px solid #999; }
.b { border-radius: 999px; border: 1px solid #999; text-align: center; }
.c { border-radius: 0.5rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); }
.d { border-radius: 0.5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.12); }

<div class="reihe">
  <div class="karte a">Rundung</div>
  <div class="karte b">Pille</div>
  <div class="karte c">Schatten</div>
  <div class="karte d">Zwei Schatten</div>
</div>

box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
/*          x y unschärfe  Farbe */

Zwei schwache Schatten wirken natürlicher als ein starker.
Schatten fallen in einer Oberfläche einheitlich. Darum am besten eine Variable.
border-radius: 999px ergibt eine Pille, 50% einen Kreis.
text-shadow funktioniert ähnlich für Schrift.

Verläufe

Ein Verlauf ist für CSS ein Bild, also ein Wert für background.

Verläufe

div { margin: 0.5rem 0; padding: 1rem; color: #fff; }
.a { background: linear-gradient(#0f766e, #134e4a); }
.b { background: linear-gradient(120deg, #0f766e, #7c3aed); }
.c { background: radial-gradient(circle at top left, #14b8a6, #134e4a); }
.d { background: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), url("/bilder/laufstrecke.svg") center / cover; }

<div class="a">linear, von oben nach unten</div>
<div class="b">linear, im Winkel</div>
<div class="c">radial</div>
<div class="d">Verlauf über einem Bild: Text bleibt lesbar</div>

Der Trick im letzten Beispiel ist wichtig: Text auf Fotos ist oft schwer lesbar. Ein halbtransparenter Verlauf über dem Bild löst das.

Zustände machen Oberflächen lebendig

button {
  background: var(--farbe-akzent);
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #134e4a;
}

button:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

Weiche Übergänge mit transition kommen am Donnerstag dazu.

Live-Coding: Die Vereinsseite wird schön

Der Kopf bekommt einen Verlauf über die ganze Breite, Abschnitte werden zu Karten, die Formularfelder und der Button werden gestaltet. Außerdem wird der Sprunglink von gestern versteckt, bis er den Fokus erhält.

/* Der Kopf: ein Farbverlauf über die volle Breite */
body > header {
  max-width: none;
  padding-inline: max(var(--abstand-l), calc((100% - 60rem) / 2 + var(--abstand-l)));
  background: linear-gradient(120deg, #0f766e, #134e4a);
  color: #fff;
}

body > header p {
  margin: 0;
}

.hauptmenue {
  margin: var(--abstand-s) 0 0;
}

.hauptmenue li {
  display: inline-block;
  margin: 0 var(--abstand-s) 0 0;
}

.hauptmenue a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}

.hauptmenue a:hover,
.hauptmenue a[aria-current="page"] {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}

.hauptmenue a:focus-visible {
  outline-color: #fff;
}

/* Karten: Rundung und Schatten statt Rahmen */
section {
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--schatten);
}

figure img {
  border-radius: var(--radius);
}

figcaption {
  margin-top: var(--abstand-s);
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
}

/* Tabelle */
caption {
  padding-bottom: var(--abstand-s);
  font-weight: bold;
  text-align: left;
}

thead th {
  background: var(--farbe-akzent);
  color: #fff;
}

thead th:first-child {
  border-top-left-radius: var(--radius);
}

thead th:last-child {
  border-top-right-radius: var(--radius);
}

/* Der Button: Hauptaktion mit klarer Rückmeldung */
button {
  padding: 0.6rem 1.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--farbe-akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover {
  background: #134e4a;
}

button:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

input:not([type="radio"], [type="checkbox"]),
select,
textarea {
  border: 1px solid #76818f;
  border-radius: 0.375rem;
  font: inherit;
}

fieldset {
  max-width: 30rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}

/* Der Sprunglink erscheint erst mit dem Tastaturfokus */
a[href="#inhalt"] {
  position: absolute;
  top: -5rem;
  left: 1rem;
  padding: var(--abstand-s) var(--abstand-m);
  background: #fff;
}

a[href="#inhalt"]:focus {
  top: 1rem;
}

footer {
  margin-top: var(--abstand-l);
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

Für den Sprunglink kam position: absolute zum Einsatz. Das erklärt der Morgen von Tag 3.

Übung

Starter für die Übung

⤓ uebung-10-gestalten.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, stimmen.css, stimmen.html, termine.html

Die neue Seite stimmen.html zeigt Mitgliederstimmen, aber noch ohne Gestaltung. Schreibe deine Regeln in stimmen.css.

Stufe 1: Karte

Jede .stimme wird eine Karte mit Innenabstand, Rundung und Schatten. Nutze die Variablen aus stil.css.

Stufe 2: Details

Das Zitat wird größer, der Name darunter kleiner und grau. Die Karte bekommt links eine dicke farbige Kante.

Stufe 3: Verlauf und Reaktion

Ein dezenter Hintergrundverlauf. Beim Überfahren mit der Maus wird der Schatten stärker.

Für Schnelle

Setze mit ::before ein großes Anführungszeichen als Schmuck in die rechte obere Ecke.