Box-Schatten in CSS

Jedes Element auf einer Website erzeugt eine Box. Wenn man für die Boxen eine Schatten benötigte, musste man das früher mit Hintergrundbildern bewerkstelligen. Das hat jedoch einige Nachteile. Es erzeugt zusätzlichen Aufwand für die Erstellung der Grafiken, erhöht die Serveranfragen und somit auch die Ladezeiten und bei Boxen, die unterschiedlich groß sein können hat man außerdem das Problem, die Hintergrundbilder den Boxen anzupassen. Ab CSS3 ist das nicht mehr notwendig und ein Box-Schatten ist rein mit CSS-Code möglich. Der Schatten beim nachfolgend abgebildeten DIV-Element ist mit CSS erstellt worden.

Box-Schatten in CSS

Um den Elementen ein Schatten zuzuweisen, wird die Eigenschaft box-shadow verwendet. Der Wert besteht aus mehreren Angaben, die folgende Bedeutung haben.

  • 1. Wert: Horizontaler Versatz
  • 2. Wert: Vertikaler Versatz
  • 3. Wert: Größe
  • 4. Wert: Farbe
  • 5. Wert: Optional, für einen Schatten nach innen

Die Syntax ist nachfolgend anhand eines Beispiels ersichtlich, bei dem auf den 5. Wert verzichtet wurde.

CSS-Code für box-shadow

Angabe negativer Werte und mehrerer Schatten

Ein typischer Schlagschatten hat einen Versatz nach unten und nach rechts. Man kann es aber auch nach oben und nach links verschieben, indem man negative Werte angibt. Außerdem ist es möglich, mehrere Schatten zu erzeugen. Einen neuen Satz an Werten für einen weiteren Schatten gibt man mit einem Komma getrennt an. Nachfolgend ist ein Beispielcode in CSS und die Abbildung der Darstellung im Browser.

.selektor {
box-shadow: 4px 4px 8px black,
  -25px -8px 10px green,
  25px -15px 10px blue;
}
Box mit mehreren Schatten

Schatten rundherum

In manchen Fällen kann es notwendig sein, keinen typischen Schlagschatten zu erzeugen, sondern um die Box herum. In dem Fall gibt man als Versatz die Werte 0 ein. Nachfolgend ist ein Beispielcode und die Abbildung der Darstellung im Browser.

.selektor {
box-shadow: 0 0 15px black;
}
Schatten um die Box herum

Schatten nach innen mit inset

Mit der optionalen Angabe inset wird die Richtung des Schattens nach innen gelenkt. Ein Beispielcode und die Abbildung.

.selektor {
box-shadow: 0 0 15px black inset;
}
Schatten nach innen mit inset

Textbereiche mit box-shadow

Auch den Texten kann man die Eigenschaft box-shadow zuweisen, z.B. über das SPAN-Element. Anders als beim normalen Textschatten wird dabei der Schatten für die gesamte Box zugewiesen. Ein Beispielcode.

.span1 {
box-shadow: 0 0 15px black inset;
}

.span2 {
box-shadow: 4px 4px 15px black;
}

.selektor {
box-shadow: 0 0 15px black inset;
}
<div class="selektor">
<span class="span1">Box</span> mit 
<span class="span2">Schatten</span>
</div>
Schlagschatten beim SPAN-Element

Weist man einer Box über border einen Rahmen zu, wird das berücksichtigt und der Schatten wächst mit. Außerdem werden abgerundete Ecken berücksichtigt, sofern diese den Boxen zugewiesen wurden.