CSS Box-Shadow
CSS bietet die Möglichkeit, für Boxen einen Schatteneffekt zu definieren.
Box-Schatten werden nicht vererbt.
Eigenschaften für box-shadow
Box-shadow besteht aus bis zu sechs Teilen, wobei teilweise negative Werte erlaubt sind.
- X-Verschiebung - horizontale Verschiebung des Schattens.
Negative Werte ziehen den Schatten nach links - Y-Verschiebung - vertikale Verschiebung
Negative Werte ziehen den Schatten nach oben - Blur - Weichzeichnung-Effekt, hier sind nur positive Werte möglich (optional)
- Spread - Ausdehnung des Schattens, Schattenradius (optional)
- Farbe - Farbwert des Schattens (optional)
- Inset - für innere Schatten (optional)
Beispiele für box-shadow
Einfacher Schatten
Box mit einem starken pink Schatten
.simple-pink { box-shadow: 3px 2px 22px #ff6677; }box-shadow + inset + text-shadow
Schnee mit Verlauf
Die Box und die Schrift haben einen Schatten.
.eiszeit {
box-shadow: inset 2px 16px 55px #ffffff;
border:1px solid #C4EDFF;
background-color:#C4EDFF;
text-shadow: 0 -0.15em 0 #fff;
}Mehrere Schatten
Diese Box hat fünf Schatten
Schatten können beliebig oft eingesetzt werden. Durch Kommas getrennt werden sie nacheinander aufgeführt.
.multi-shadow {
box-shadow: 0 0 10px 5px #ddd,
40px -20px #333,
40px 30px 40px #bbb,
-40px 20px #999,
-40px -20px 50px #666;
}