Mit CSS3 kann man in windeseile einen Schatten für ein Element erstellen. Und das geht mit der Eigenschaft box-shadow. Insgesamt können 4 Werte angegben werden.

  • 1. Wert: bestimmt die Positionierung des Schattens auf der X-Achse (horizontal)
  • 2. Wert: bestimmt die Positionierung des Schattens auf der Y-Achse (vertikal)
  • 3. Wert: bestimmt den Weichzeichnungsgrad des Schattens (blur)
  • 4. Wert: bestimmt die Größe des Schattens (spread)

Mit den Browser-Präfixen könnte das dann beispielsweise so aussehen:

Mit Ausnahme des Weichzeichnungsgrades sind auch negative Werte möglich. Wenn man beispielsweise die Größe des Schattens ins Minus setzt, damit der Schatten kleiner wird, muss man auch an der Positionierung drehen, damit man den Schatten wieder sieht:

Die Farbe des Schattens ändern

Standardmäßig ist der Schatten schwarz. Um das zu ändern, kann nach diesen 4 Werten noch eine Farbe, bspw. als Hexadezimalwert oder RGB(A)-Wert etc. angegeben werden.

Näheres dazu wie man Farbangaben machen kann wurde bereits in diesem Beitrag beschrieben.

Schatten nach innen

Mit inset lässt sich der Schatten auch nach innen legen:

Natürlich gibt es auch für einen Schatten wieder einen Code-Generator unter anderem diesen hier: css3.me.

Gekrümmter Schatten

Mit Schatten lassen sich noch jede Menge weitere tolle Sachen machen. Schauen Sie dazu auch einmal hier vorbei. Beispielsweise lassen sich mit einem kleinen Trick auch gekrümmte Schatten erstellen, also so einer der wie hier, am unteren Rand des Box-Elementes:

gekrümmter Schatten

gekrümmter Schatten

Dazu erstellt man mithilfe von Pseudoelementen 2 Schatten und rotiert diese anschließend in die entgegengesetzte Richtung.

Vorgehensweise:

  1. Das Ausgangs-Element relativ positionieren.
  2. Mithilfe von den Pseudoelementen (:before und :after ) jeweils einen Schatten erstellen.
  3. Die Pseudoelemente absolut positionieren.
  4. Mit z-index nach hinten setzen.
  5. Jeden Schatten halb so groß machen, wie das Ausgangs-Element.

6. Nun die beiden Schatten jeweils in die entgegengesetzte Richtung rotieren: