Schatten mit CSS3

In diesem Artikel möchte ich euch zeigen, wie ihr auf einfache Weise Schatten mit CSS erzeugt. Dafür ist die Eigenschaft „box-shadow“ vorgesehen. Ich werde nun näher auf die Funktionsweise und Variationsmöglichkeiten eingehen.

Was macht box-shadow?

Nun ja, die Eigenschaft box-shadow verpasst HTML-Elementen einen Schatten. Das interessante dabei ist, dass dieser sich bei Veränderung der Größe des Elementes non-destruktiv mitverändert. Ebenso passt er sich abgerundeten Ecken an.

Wie wendet man es an?

Mit folgendem Code werde ich drei Quadrate mit verschiedenen Schattenvariationen erzeugen:

#box1 {
  width:150px;
  height:150px;
  background-color:#ccc;
  box-shadow:5px 5px 0px #000;
  -moz-box-shadow:5px 5px 0px #000;
  -webkit-box-shadow:5px 5px 0px #000;
}
 
#box2 {
  width:150px;
  height:150px;
  background-color:#ccc;
  box-shadow:5px 5px 3px #000;
  -moz-box-shadow:5px 5px 3px #000;
  -webkit-box-shadow:5px 5px 3px #000;
}
 
#box3 {
  width:120px;
  height:120px;
  background-color:#ccc;
  box-shadow:0px 0px 2px #000;
  border:1px solid #fff;
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow:0px 0px 2px #000;
}

Das würde zu folgendem Ergebnis führen:

Was habe ich nun gemacht und wofür stehen die Werte?

Zuerst habe ich für das Element mit width und height eine Breite und Höhe von jeweils 120 Pixel definiert. Mit background-color gab ich dem Quadrat ein neutrales Grau als Hintergrundfarbe. Nun kommen wir zum eigentlichen Schatten. Der Befehl dafür lautet box-shadow und besteht aus einzelnen Werten:

box-shadow:5px 5px 0px #000;

Der erste Pixelwert (5px) gibt den Versatz des Schattens von links an. Beim zweiten (5px) wird definiert, wie weit der Schatten nach unten verrückt wird. Der Dritte Pixelwert (0px) gibt an, wie stark der Schatten weichgezeichnet ist bzw. wieviel Unschärfe er enthalten soll. Außerdem gibt es noch einen optionalen vierten Pixelwert, der den Radius des Schattens bestimmt. So lässt er sich auch auf abgerundete Ecken ohne Probleme anwenden. Der letzte Wert (#000) bestimmt die Farbe des Schattens.

Ergänzungen wie -moz-box-shadow (Firefox) oder -webkit-box-shadow (Webkitbasierte Browser wie Safari & Chrome) sollte man hinzufügen, um die Browserkompatibilität zu garantieren.

Weitere Funktionen

Eine interessante Funktion von box-shadow ist auch, dass man diesen innerhalb des Elementes einsetzen kann. Das könnte beispielsweise so aussehen:

Der Code dafür:

#inset {
   width:450px;
   height:50px;
   background-color:#ccc;
   box-shadow: inset 2px 2px 3px #000;
   -moz-box-shadow: inset 2px 2px 3px #000;
   -webkit-box-shadow: inset 2px 2px 3px #000;
}

Wie man sieht, reicht dafür nur die Ergänzung „inset“.

So einfach und produktiv ist es also, Schatten mit CSS zu erzeugen. Ich hoffe, dass ich euch mit dieser kleinen Anleitung etwas helfen konnte.