Box-Schatten (box-shadow)...
Box-Schatten können mit der CSS-Eigenschaft box-shadow definiert werden. Ein Schatten setzt sich aus den Werten für den horizontalen und den vertikalen Abstand, die Weichzeichnung (blur) und die Ausbreitung (spread) gefolgt von der Farbe (color) zusammen.
box-shadow:
    {horizontal}px {vertikal}px
    {blur}px {spread}px {color};
Die Abstände können positiv (d.h. horizontal nach rechts bzw. vertikal nach unten) oder negativ (d.h. horizontal nach links bzw. vertikal nach oben) sein.
Die Größe der Weichzeichnung (blur) muss ein positiver Wert oder 0 sein. Dabei bedeutet 0, dass die Kante des Schattens scharf gezeichnet wird.
Die Ausbreitung (spread) dehnt den Schatten in alle Richtungen aus. Negative Werte sind erlaubt und bewirken eine Kontraktion.
Als Maßeinheit für die Abstände, die Weichzeichnung und die Ausbreitung können px, pt, pc, in, mm, cm, em und ex verwendet werden.
Schatten scharf gezeichnet:
box-shadow:
0.7em 0.6em 0em 0em #B8B8B8;
 
Schatten mit blur weich gezeichnet:
box-shadow:
0.7em 0.6em 0.5em 0em #B8B8B8;
 
Schatten mit blur und spread
weich gezeichnet:
box-shadow:
0.7em 0.6em 0.5em 0.4em #B8B8B8;
 
Listen von Schatten...
Mehrere Schatten können als komma-getrennte Liste angegeben werden.
box-shadow:
    {horizontal 1}px {vertikal 1}px
    {blur 1}px {spread 1}px {color 1},
    ...,
    {horizontal n}px {vertikal n}px
    {blur n}px {spread n}px {color n};
Durch die Kombination mehrerer Schatten und geeignete Farbwahl lassen sich Struktureffekte wie z.B. erhaben erscheinende Flächen erzeugen.
Erhabene Fläche:
box-shadow:
-0.1em -0.1em 0.15em 0.1em #F4F4F4,
0.1em 0.1em 0.15em 0.1em #909090;
 
Schatten nach innen...
Um den Schatten ins Innere des Elments fallen zu lassen, kann das Schlüsselwort inset der Schattendefinition vorangestellt werden.
box-shadow:
    inset {horizontal}px {vertikal}px
    {blur}px {spread}px {color};
Schatten nach innen:
box-shadow:
inset 0.1em 0.1em 0.15em 0.1em #A0A0A0;
 
Effekte durch die Kombination von Schatten...
Durch eine Liste von Schatten und die Variation der Farbe lassen sich Effekte wie z.B. Vertiefungen, Reliefs oder Rahmen mit Farbeffekten erzeugen.
Relief nach innen:
box-shadow:
-0.1em -0.1em 0.15em 0.1em #707070,
inset 0.1em 0.1em 0.15em 0.1em #F4F4F4,
0.1em 0.1em 0.1em 0.1em #F0F0F0,
inset -0.1em -0.1em 0.1em 0.1em #707070;
 
Relief nach außen:
box-shadow:
-0.1em -0.1em 0.15em 0.1em #F4F4F4,
inset 0.1em 0.1em 0.15em 0.1em #A0A0A0,
0.15em 0.15em 0.15em 0.05em #686868,
inset -0.1em -0.1em 0.1em 0.1em #FBFBFB;
 
Farbverlauf als Rahmen:
box-shadow:
inset 0em 0em 0.3em 0.1em #FFF24D,
0em 0em 0.3em 0.2em #FFDD49,
0em 0em 0.3em 0.25em #FF7346,
0em 0em 0.4em 0.3em #DF3D00,
0.7em 0.7em 0.7em 0.25em #A0A0A0;
 
Weitere Informationen...
Browser-Unterstützung
Detaillierte Informationen über die Unterstützung der box-shadow-Eigenschaft durch diverse unterschiedliche Browser-Versionen gibt es bei caniuse.com.
Formale Definition
Eine formale Definition der box-shadow-Eigenschaft gibt es beim W3C.
CSS-Eigenschaften und Beispiele...
Auf den folgenden Seiten finden Sie einige technische Informationen und Beispiele zu CSS-Eigenschaften, die im CSS-Baukasten für Dekorationen und Schriftarten verwendet werden können:
Prografaktur Software GmbH | Hasenbergsteige 15 | 70178 Stuttgart | Deutschland | service@css-baukasten.de