Schatten

Ein weicher Schatten lässt eine Karte aussehen, als würde sie ein Stück über der Seite schweben. In CSS entsteht ein Schatten mit der Eigenschaft box-shadow, die der CSS-Kurs nicht behandelt hat. Ihr Wert beschreibt den Schatten:

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

• 0: wie weit der Schatten nach rechts verschoben ist (ein negativer Wert verschiebt ihn nach links);
• 10px: wie weit er nach unten verschoben ist (negativ: nach oben). Ein Schatten unter einem Element sieht aus, als käme das Licht von oben;
• 15px: die Unschärfe: Je größer der Wert, desto weicher der Rand des Schattens;
• -3px: die Ausbreitung: Ein positiver Wert macht den Schatten größer als das Element, ein negativer kleiner;
• rgb(0 0 0 / 0.1): die Farbe, hier Schwarz mit einem Alphawert von 0.1, also zu 90 % durchsichtig. Das ist die neuere Schreibweise mit Schrägstrich, die du im CSS-Kurs gesehen hast.

Du kannst mehrere Schatten durch Kommas getrennt schreiben, und die meisten Schatten von Tailwind nutzen zwei auf einmal, damit sie natürlicher wirken. Du musst dir die Werte nicht merken: Du wählst nur eine Größe. So sehen sie aus:

So bedeutet zum Beispiel shadow-lg Folgendes (Tailwind schreibt es mit Variablen, damit es sich mit anderen Klassen kombinieren lässt, aber das Ergebnis ist dasselbe):

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Wie bei den abgerundeten Ecken haben sich die Namen in Tailwind 4 geändert: In älteren Beispielen ist shadow-sm das heutige shadow-xs und shadow das heutige shadow-sm. shadow-none entfernt einen Schatten.

Ein Schatten ist standardmäßig schwarz, aber du kannst ihm eine Farbe aus der Palette geben: shadow-lg shadow-orange-200 ergibt ein helles oranges Leuchten. Wähle auf einer hellen Seite dezente Schatten: Große, dunkle wirken schwer. Unsere Karte hat schon einen hellen Rahmen, und zusammen mit einem Schatten hebt sie sich schön von der Seite ab.