Schatten

The CSS Podcast – 017: Schatten

Angenommen, Sie haben ein Design erhalten, das Sie erstellen sollen. In diesem Design ist ein Bild eines T-Shirts zu sehen, das ausgeschnitten ist und einen Schatten hat. Der Designer erklärt Ihnen, dass das Produktbild dynamisch ist und über das Content-Management-System aktualisiert werden kann. Daher muss auch der Schatten dynamisch sein. Anstelle eines T-Shirts kann das Bild auch ein Visier, Shorts oder ein anderes Kleidungsstück sein. Wie machen Sie das mit CSS?

CSS bietet die Properties box-shadow und text-shadow. Da es sich bei dem Bild jedoch nicht um Text handelt, können Sie text-shadow nicht verwenden. Wenn Sie box-shadow verwenden, wird der Schatten auf dem umgebenden Feld und nicht um das T-Shirt herum angezeigt.

Glücklicherweise gibt es eine andere Option: den Filter drop-shadow(). So können Sie genau das tun, was der Designer verlangt hat. Es gibt viele Optionen für Schatten in CSS, die jeweils für einen anderen Anwendungsfall entwickelt wurden.

Rahmenschatten

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

Mit der Property box-shadow können Sie dem Feld eines HTML-Elements Schatten hinzufügen. Sie funktioniert für Block- und Inline-Elemente.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Die Werte für box-shadow sind so angeordnet:

  1. Horizontaler Offset: Mit einer positiven Zahl wird das Element nach links und mit einer negativen Zahl nach rechts verschoben.
  2. Vertikaler Versatz: Mit einer positiven Zahl wird das Element von oben nach unten verschoben, mit einer negativen Zahl von unten nach oben.
  3. Weichzeichnerradius: Je größer der Wert, desto unschärfer ist der Schatten. Ein kleiner Wert ergibt einen schärferen Schatten.
  4. Ausbreitungsradius (optional): Mit einem höheren Wert wird der Schatten größer und mit einem niedrigeren Wert kleiner. Wenn er auf „0“ gesetzt ist, hat er dieselbe Größe wie der Unkenntlichmachungsradius.
  5. Farbe: Beliebiger gültiger Farbwert. Wenn dies nicht definiert ist, wird die berechnete Textfarbe verwendet.

Wenn Sie einen Schatten als Innen- statt als Standard-Außenschatten festlegen möchten, fügen Sie das Keyword inset vor den anderen Properties hinzu.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Mehrere Schatten

Mit box-shadow können Sie beliebig viele Schatten hinzufügen. Fügen Sie dazu eine durch Kommas getrennte Sammlung von Wertesätzen hinzu:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Eigenschaften, die sich auf den Schatten auswirken

Wenn Sie Ihrem Feld ein border-radius hinzufügen, wirkt sich das auch auf die Form des Schattens aus. Das liegt daran, dass CSS einen Schatten basierend auf der Form des Felds erzeugt, als würde Licht darauf gerichtet.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Wenn sich Ihr Feld mit box-shadow in einem Container mit overflow: hidden befindet, überschreitet der Schatten diesen Überlauf ebenfalls nicht.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Textschatten

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Das Attribut text-shadow ist dem Attribut box-shadow sehr ähnlich. Sie funktioniert nur bei Textknoten.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Die Werte für text-shadow sind mit denen für box-shadow identisch und in derselben Reihenfolge. Der einzige Unterschied besteht darin, dass text-shadow keinen spread-Wert und kein inset-Keyword hat.

Wenn Sie ein box-shadow hinzufügen, wird es an die Form des Felds zugeschnitten. Bei text-shadow ist das nicht der Fall. Das bedeutet, dass der Schatten durch den Text hindurch sichtbar ist, wenn dieser vollständig oder teilweise transparent ist.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Mehrere Schatten

Mit text-shadow können Sie beliebig viele Schatten hinzufügen, genau wie mit box-shadow. Wenn Sie eine durch Kommas getrennte Sammlung von Wertesätzen hinzufügen, können Sie coole Texteffekte wie 3D-Text erstellen.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Schlagschatten

Wenn Sie einen Schlagschatten haben möchten, der allen möglichen Kurven eines Bildes folgt, verwenden Sie den CSS-Filter drop-shadow. Dieser Schatten wird auf eine Alphamaske angewendet, was ihn sehr nützlich macht, um einem Ausschnittsbild einen Schatten hinzuzufügen, wie im Intro dieses Moduls.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Der Filter drop-shadow hat dieselben Werte wie box-shadow, aber das Keyword inset und der Wert spread sind nicht zulässig. Sie können beliebig viele Schatten hinzufügen, indem Sie der filter-Property mehrere Instanzen von drop-shadow-Werten hinzufügen. Für jeden Schatten wird der letzte Schatten als Referenzpunkt für die Positionierung verwendet.

Wissen testen

Ihr Wissen über Schatten testen

Welcher der folgenden Schattenwerte ist nur für box-shadow verfügbar?

Horizontaler Versatz
Versuch es noch einmal.
Vertikales Offset
Versuch es noch einmal.
Weichzeichner-Radius
Versuch es noch einmal.
Streuradius
🎉
Farbe
Versuch es noch einmal.
inset
Versuch es noch einmal. inset ist ein Keyword, das ebenfalls nur für box-shadow verwendet wird.

Für ein Element sind jeweils nur 13 Box-Schatten zulässig.

Richtig
Es gibt keine offizielle Beschränkung.
Falsch
Fügen Sie nach Bedarf beliebig viele Schatten hinzu.