Schatten und Tiefe

Eine weiße Karte auf weißem Grund verschwindet. Ein Schatten hebt sie ab und zeigt, dass sie über dem anderen liegt. Mehr soll er nicht tun. Alles darüber hinaus sieht nach Dekoration aus, und Dekoration altert schnell.

01 / 04Die fünf Werte von box-shadow

<div class="karte hart">Ein harter grauer Schatten</div>
<div class="karte weich">Zwei weiche übereinander</div>
<div class="karte vertieft">inset, also nach innen</div>

body {
  padding: 24px;
  background-color: #f4f4f5;
}

.karte {
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
  background-color: #ffffff;
}

/* Versatz nach rechts und unten, gar nicht weich,
   festes Grau. So sahen Schatten um 2010 aus. */
.hart {
  box-shadow: 4px 4px 0 0 #a1a1aa;
}

/* Ein enger für die Kante, ein großer für die Höhe.
   Beide sehr durchsichtig. */
.weich {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 5%),
    0 8px 24px rgb(0 0 0 / 10%);
}

/* inset zeichnet den Schatten nach innen. */
.vertieft {
  background-color: #e4e4e7;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 20%);
}

box-shadow nimmt bis zu fünf Angaben, in dieser Reihenfolge.

• Versatz nach rechts und Versatz nach unten. Negative Werte gehen nach links und oben. Für eine Karte steht der waagerechte Versatz fast immer auf null, denn Licht kommt von oben und nicht von der Seite.
• Weichzeichnung. Null ergibt eine harte Kante, größere Werte einen weichen Verlauf. An dieser Angabe entscheidet sich, ob ein Schatten modern oder veraltet aussieht.
• Streuung. Sie vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Man braucht sie selten, und wenn, dann negativ, um einen weichen Schatten wieder einzusammeln.
• Farbe.

An der Farbe hängt am meisten. Ein Schatten ist durchscheinendes Schwarz und kein Grau. rgb(0 0 0 / 10%) nimmt den Ton an, auf dem es liegt. Ein festes #a1a1aa sieht auf Weiß passabel aus und auf einer farbigen Fläche schmutzig.

inset als sechste Angabe dreht die Richtung um. Der Schatten liegt dann innen, und das Element wirkt vertieft. Für Eingabefelder und gedrückte Buttons ist das die richtige Wahl.

02 / 04Warum zwei Schatten besser sind als einer

Der zweite Kasten im Beispiel hat zwei Schatten, kommagetrennt. Deshalb wirkt er echter als der erste.

Ein Gegenstand, der auf einer Fläche liegt, hat in Wirklichkeit auch zwei Schatten. Einer ist eng und dunkel und sitzt direkt an der Kante, wo kaum Licht hinkommt. Der andere ist groß und weich, und an ihm siehst du, wie hoch der Gegenstand liegt. Ein einzelner Schatten kann nur eins von beiden.

Ich nehme deshalb 0 1px 2px mit etwa fünf Prozent Schwarz für die Kante und 0 8px 24px mit etwa zehn Prozent für die Höhe. Beide zusammen sind schwächer als ein einzelner mit dreißig Prozent und wirken trotzdem plastischer, denn das Auge findet in ihnen beides wieder, die Kante und die Höhe.

Je höher ein Element liegen soll, desto größer werden Versatz und Weichzeichnung. Daraus bauen Design-Systeme ihre Stufen. Eine Karte liegt tiefer als ein Menü, ein Menü tiefer als ein Dialog.

03 / 04Text auf einem Bild

<section class="hero ohne">
  <h2>Ohne Textschatten</h2>
</section>

<section class="hero mit">
  <h2>Mit Textschatten</h2>
</section>

.hero {
  min-height: 160px;
  padding: 24px;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-color: #18181b;
  background-image: url("/lernen/media/hero-1600.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.hero h2 {
  margin: 0;
  font-size: 32px;
}

/* Kaum Versatz, viel Weichzeichnung: das ergibt einen
   dunklen Hof rund um die Buchstaben. */
.mit h2 {
  text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
}

Auf einem Foto reicht Kontrast oft nicht, denn ein Foto ist an einer Stelle hell und an einer anderen dunkel. Weißer Text ist dann links lesbar und rechts nicht.

Im Beispiel liegt die Überschrift vor dem hellen Fenster. Ohne Schatten geht sie dort fast unter. Mit Schatten liegt ein dunkler Hof um die Buchstaben und hebt sie vom Himmel ab. In einer schmalen Spalte bricht sie um und steht vor der dunklen Wand, und dort reicht das Weiß auch ohne Schatten.

Nachmessen kannst du das nicht. Ausnahmsweise ist das die richtige Antwort und keine Lücke. An der Überschrift fehlt im Auskunftsstreifen die Zeile Kontrast, die sonst dasteht. Liegt ein Bild hinter dem Text, gibt es kein einzelnes Verhältnis mehr, das für die ganze Fläche gilt.

text-shadow nimmt dieselben Angaben wie box-shadow, nur ohne Streuung und ohne inset. Für lesbaren Text auf Bildern nehme ich wenig Versatz und viel Weichzeichnung. Das ergibt einen dunklen Hof um die Buchstaben. Als Schatten nimmt man ihn gar nicht wahr, aber er hilft überall.

Ein Ersatz für einen ordentlich abgedunkelten Hintergrund ist das nicht. Wie du den baust, kommt in der nächsten Lektion.

Für Formen, die kein Kasten sind, etwa ein Logo mit durchsichtigem Rand, gibt es filter: drop-shadow(). Es legt den Schatten um das, was wirklich sichtbar ist. Mehr dazu steht in der CSS-Referenz unter filter.

04 / 04Wann gar kein Schatten

Ein Schatten trennt eine Fläche von ihrem Untergrund. Das geht auch billiger, mit einem Rahmen oder mit einem anderen Hintergrund.

Wenn deine Karten auf Weiß liegen und selbst weiß sind, brauchst du einen Schatten oder einen Rahmen. Liegen sie auf hellem Grau, reicht das Weiß der Karte schon. Dann ist der Schatten Zierrat.

In der Aufgabe liegen Karte und Hero noch flach auf ihrem Untergrund.