Schatten und Tiefe

Ein Schatten sagt: dieses Element liegt über dem anderen. Das ist die ganze Aufgabe. Alles, was darüber hinausgeht, sieht meistens nach Dekoration aus, und Dekoration altert schnell.

01 / 05Die 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: 20px;
  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: Licht kommt von oben, nicht von der Seite.

Weichzeichnung. Null ergibt eine harte Kante, größere Werte einen weichen Verlauf. Das ist die Angabe, an der ein Schatten modern oder veraltet wirkt.

Streuung. Vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Braucht man selten, und wenn, dann negativ, um einen weichen Schatten wieder einzusammeln.

Farbe. Und hier steckt der wichtigste Punkt der Lektion: ein Schatten ist kein Grau, sondern durchscheinendes Schwarz. 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 Knöpfe ist das die richtige Wahl.

02 / 05Warum zwei Schatten besser sind als einer

Der zweite Kasten im Beispiel trägt zwei Schatten, kommagetrennt. Das ist kein Spleen, sondern der Grund, warum er echter wirkt als der erste.

In der Wirklichkeit hat ein Gegenstand, der auf einer Fläche liegt, zwei Schatten: einen sehr engen dunklen direkt an der Kante, wo kaum Licht hinkommt, und einen großen weichen darunter, der zeigt, wie hoch er liegt. Ein einzelner Schatten kann nur eins von beiden.

Das übliche Rezept ist deshalb: 0 1px 2px mit etwa fünf Prozent Schwarz für die Kante, 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.

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

03 / 05Text 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: center;
  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, weil das Foto an einer Stelle hell und an einer anderen dunkel ist. Weißer Text ist dann links lesbar und rechts nicht.

Im Beispiel siehst du davon wenig. Das Bild dort ist ein Platzhalter und durchgehend dunkel, also trägt das Weiß auch ohne Schatten, und die beiden Kästen sehen fast gleich aus. Der Schatten ist hier die Versicherung für den Tag, an dem an dieser Stelle ein echtes Foto mit einer hellen Fläche liegt.

Nachmessen kannst du das nicht, und das ist ausnahmsweise die richtige Antwort und keine Lücke. Fahr mit dem Inspector über die Überschrift: die Zeile Kontrast, die sonst im Auskunftsstreifen steht, fehlt hier. Liegt ein Bild hinter dem Text, gibt es kein einzelnes Verhältnis mehr, das für die ganze Fläche gilt. Was man stattdessen tut, ist das Thema der nächsten Lektion.

text-shadow nimmt dieselben Angaben wie box-shadow, nur ohne Streuung und ohne inset. Für lesbaren Text auf Bildern ist der Trick: wenig Versatz, viel Weichzeichnung. Das ergibt einen dunklen Hof um die Buchstaben, den man nicht als Schatten wahrnimmt, der aber überall trägt.

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

04 / 05drop-shadow folgt der Form

<div class="reihe">
  <div class="dreieck box"></div>
  <div class="dreieck drop"></div>
</div>

<p>Links box-shadow, rechts filter: drop-shadow.</p>

body {
  padding: 24px;
  font-family: system-ui, sans-serif;
  background-color: #fafafa;
}

.reihe {
  margin-bottom: 24px;
}

/* Ein Dreieck aus Rahmen: der Kasten selbst ist
   null Pixel groß, sichtbar ist nur der untere Rahmen. */
.dreieck {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 48px;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid #2563eb;
}

/* box-shadow kennt nur den Kasten und wirft deshalb
   ein Rechteck. */
.box {
  box-shadow: 0 6px 12px rgb(0 0 0 / 40%);
}

/* drop-shadow schaut sich an, was wirklich zu sehen ist. */
.drop {
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 40%));
}

box-shadow kennt nur den Kasten. Bei einem Logo mit Transparenz, einem Dreieck oder einem freigestellten Bild wirft es deshalb ein Rechteck, wo eigentlich die Form gefragt wäre.

filter: drop-shadow() schaut sich an, was tatsächlich sichtbar ist, und legt den Schatten darum. Es nimmt dieselben Werte, aber keine Streuung.

Ein Nachteil bleibt: filter erzeugt einen eigenen Stacking Context. Was das bedeutet und warum es dir später einmal einen Nachmittag kostet, steht in Lektion 8.6.

05 / 05Wann gar kein Schatten

Zum Schluss die unbequeme Frage. Ein Schatten trennt eine Fläche von ihrem Untergrund, und dafür gibt es zwei billigere Mittel: einen Rahmen und einen 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, und Zierrat ist das erste, was in zwei Jahren alt aussieht.