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:

 

Das würde zu folgendem Ergebnis führen:

Box 1
Box 2
Box 3
 

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:

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:

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.